Vue 与 Vuex 的第一次接触遇到的坑


Posted in Javascript onAugust 16, 2018

在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式

但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。

一、安装并引入 Vuex

项目结构:

Vue 与 Vuex 的第一次接触遇到的坑

首先使用 npm 安装 Vuex

cnpm install vuex -S 

然后在 main.js 中引入

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)
/* eslint-disable no-new */
new Vue({
 el: '#app',
 store,
 render: h => h(App)
})

二、构建核心仓库 store.js

Vuex 应用的状态 state 都应当存放在 store.js 里面,Vue 组件可以从 store.js 里面获取状态,可以把 store 通俗的理解为一个全局变量的仓库。

但是和单纯的全局变量又有一些区别,主要体现在当 store 中的状态发生改变时,相应的 vue 组件也会得到高效更新。

在 src 目录下创建一个 vuex 目录,将 store.js 放到 vuex 目录下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 // 定义状态
 state: {
 author: 'Wise Wrong'
 }
})
export default store

这是一个最简单的 store.js,里面只存放一个状态 author

虽然在 main.js 中已经引入了 Vue 和 Vuex,但是这里还得再引入一次

三、将状态映射到组件

<template>
 <footer class="footer">
 <ul>
  <li v-for="lis in ul">{{lis.li}}</li>
 </ul>
 <p>
  Copyright © {{author}} - 2016 All rights reserved
 </p>
 </footer>
</template>
<script>
 export default {
 name: 'footerDiv',
 data () {
  return {
  ul: [
   { li: '琉璃之金' },
   { li: '朦胧之森' },
   { li: '缥缈之滔' },
   { li: '逍遥之火' },
   { li: '璀璨之沙' }
  ]
  }
 },
 computed: {
  author () {
  return this.$store.state.author
  }
 }
 }
</script>

这是 footer.vue 的 html 和 script 部分

主要在 computed 中,将 this.$store.state.author 的值返回给 html 中的 author

页面渲染之后,就能获取到 author 的值 

Vue 与 Vuex 的第一次接触遇到的坑

四、在组件中修改状态

然后在 header.vue 中添加一个输入框,将输入框的值传给 store.js 中的 author

这里我使用了 Element-UI 作为样式框架

Vue 与 Vuex 的第一次接触遇到的坑

上面将输入框 input 的值绑定为 inputTxt,然后在后面的按钮 button 上绑定 click 事件,触发 setAuthor 方法

methods: {
 setAuthor: function () {
 this.$store.state.author = this.inpuTxt
 }
}

在 setAuthor 方法中,将输入框的值 inputTxt 赋给 Vuex 中的状态 author,从而实现子组件之间的数据传递

Vue 与 Vuex 的第一次接触遇到的坑

五、官方推荐的修改状态的方式

上面的示例是在 setAuthor 直接使用赋值的方式修改状态 author,但是 vue 官方推荐使用下面的方法:

Vue 与 Vuex 的第一次接触遇到的坑

首先在 store.js 中定义一个方法 newAuthor,其中第一个参数 state 就是 $store.state,第二个参数 msg 需要另外传入

然后修改 header.vue 中的 setAuthor 方法

Vue 与 Vuex 的第一次接触遇到的坑

这里使用 $store.commit 提交 newAuthor,并将 this.inputTxt 传给 msg,从而修改 author

这样显式地提交(commit) mutations,可以让我们更好的跟踪每一个状态的变化,所以在大型项目中,更推荐使用第二种方法。

总结

以上所述是小编给大家介绍的Vue 与 Vuex 的第一次接触遇到的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
DOM 中的事件处理介绍
Jan 18 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
深入理解Vue 组件之间传值
Aug 16 #Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 #Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 #Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 #Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 #Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 #Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 #Javascript
You might like
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
php标签云的实现代码
2012/10/10 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
koa-router源码学习小结
2018/09/07 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
Python学生信息管理系统修改版
2018/03/13 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
Python基于百度云文字识别API
2018/12/13 Python
python利用7z批量解压rar的实现
2019/08/07 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
年度考核评语
2014/01/19 职场文书
《将心比心》教学反思
2014/04/08 职场文书
道歉信范文
2015/05/12 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
golang 实用库gotable的具体使用
2021/07/01 Golang
python读取mnist数据集方法案例详解
2021/09/04 Python
Python学习之包与模块详解
2022/03/19 Python
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server