本文共 5833 字，大约阅读时间需要 19 分钟。
vuex作用:
组件的通信成本很高，所以为了简化组件间通信（共享数据），vue提供了vuex插件。是基于flux思想实现的。
flux
是由react团队提供的数据通信架构思想。解决网状通信的问题。实现了数据单向流动。
由四部分组成
action 消息对象
dispatcher 用来捕获消息对象，并处理数据
store 存储数据
view 组件视图
flux通信流程
一个组件或者用户发布一个action消息
消息被dispatcher捕获，并根据消息类型，处理数据
并将新的数据传递给store去存储，
store中的数据发生改变，将数据传递给另一个组件。
那vuex是如何实现的呢？
vuex就是基于flux思想实现的，实现了单一数据源，数据单向流动等特征。
组成部分
简化了flux，是由三个部分
action 消息模块
state 存储数据
view 组件视图
通信流程
一个组件发布消息，
消息被action模块捕获，
并根据消息类型，处理数据
action将新的数据传递给state去存储。
state中的数据发生了改变，将新的数据传递给另一个组件。
action分类
在vuex中，将action分成两类
一类是同步消息：mutation
为了可测试
一类是异步消息：action
为了异步操作
store组成
下图中，绿色虚线部分就是vuex，在代码中用store表示。
由于vuex实现了单一数据源的特征，所以整个应用程序中，只能有且只有一个store对象
在store中，由五部分组成：
state 存储组件间共享的数据
getters 存储组件间共享的计算属性数据
getters与state的关系与data与computed关系是一样的。
mutations 订阅同步消息的模块（相当于观察者模式中的on方法）
通过commit方法来提交同步消息（相当于观察者模式中的trigger方法）
actions 订阅异步消息的模块（相当于观察者模式中的on方法）
通过dispatch方法来提交异步消息（相当于观察者模式中的trigger方法）
modules 用来切割模块的。
注意：如果没有异步消息，可以直接发布同步消息
如果你还不懂 那我就直接上案例吧
下面的案例就是通过vuex 实现的组件共享的案例
使用vuex分成五步
第一步 安装vuex
只有在模块化开发中，需要安装（seajs除外）
Vue.use(Vuex)
use方法是专门用来安装插件的。
第二步 实例化store，通过Vue.Store类创建
参数是对象，可以传递各个组成部分：stae，mutatins ......
第三步 注册store，
为vue实例化对象安装store，一旦安装之后，所有的组件都可以获取store对象
所以就可以通过store，获取state中的数据。
注册就是说让所有的组件能够获取$store对象
通过store属性注册。
第四步 一个组件使用store中的数据
第五步 一个组件发布消息
// 引入vueimport Vue from 'vue';// 引入Vuex 使用解构 引入storeimport Vuex, { Store } from 'vuex';类型下面这种(我说的我感觉应该特别细了)// import Vuex from 'vuex';// import { Store } from 'vuex';// 1 安装 Vue.use(Vuex);// 2 实例化 storelet store = new Store({ // state存储组件间共享的数据 state: { num: 0 }, // 计算属性数据 类似computed getters: { doubleNum(state, getters) { // console.log(arguments) // num的二倍 return state.num * 2; } }, // 同步消息 mutations: { // 增加数字方法 addNum(state, num) { // console.log(this, arguments) // 更新数据 state.num += +num; }, // 减少数字方法 reduceNum(state, num) { // console.log(this, arguments) // 用num更新state中的数据 state.num -= num; }, // 清空数字方法 clearNum(state, num) { // 清空数字 state.num = num; } }, // 异步消息 异步消息要通过同步消息获取 actions: { // 清空数字方法 clear(store, num) { // 定义 异步操作 setTimeout(() => { // 发布同步消息 store.commit('clearNum', num) }, 2000) } }})// 增加数字组件let AddNum = Vue.extend({ template: `num:{ {$store.state.num}} -- { {$store.getters.doubleNum}}
`, // 组件创建完成 created() { console.log('showNum', this) }})// 实例化new Vue({ // 3 注册store store, // 视图 el: '#app', // 注册组件 components: { AddNum, ShowNum }, // 数据 data: {}, // 方法 父组件中同样是通过$store.commit 获取同步消息 methods: { // 发布减少数字消息 sendReduceNumMessage() { // 发布同步消息 // 多个数据，放在数组或者对象中 // this.$store.commit('reduceNum', [2, 5, 100, true]) this.$store.commit('reduceNum', 2) } }, // 组件创建完成 created() { console.log('app', this) }})
补充一下 modules
我们通过modules来切割模块。
解决问题：如果应用程序很大，会有很多的共享数据，放在同一个state中，会有命名冲突问题。为了解决这类问题，我们可以通过modules切割store，来分类存储state数据。
切割出来的store，本质也是store，因此也可以传递store的各个模块：state，getters，mutations，actions，modules
store中的数据是作为state来存储的，因此切割store的本质，就是切割state，所以只有state需要添加命名空间，其它的数据可以正常使用。
modules属性值是对象
key 表示命名空间
value 是子store对象，可以定义store的各个部分。
此时就有了全局store与局部store对象了，它们内部可以定义同名的数据
data 使用的时候，要携带命名空间
mutations,action 正常使用，
局部的消息修改局部的数据
全局的消息修改全局的数据
但是发布同名的消息，局部与全局的都会执行
getters 不允许同名
// 引入vueimport Vue from 'vue';// 引入Vuex 使用解构 引入storeimport Vuex, { Store } from 'vuex';类型下面这种(我说的我感觉应该特别细了)// import Vuex from 'vuex';// import { Store } from 'vuex';// 1 安装 Vue.use(Vuex);// 2 实例化 storelet store = new Store({ // 全局数据 state: { num: 10, }, // 计算属性数据 getters: { dealColor(state) { return state.color.toUpperCase(); }, // 同名计算属性数据，不允许定义 // doubleNum() {} }, // 全局消息 mutations: { addNum(state, num) { state.num += num; } }, //这里来切割模块 定义局部的store modules: { // 命名空间是str str: { // state存储组件间共享的数据 state: { num: 0 }, // 计算属性数据 类似computed getters: { doubleNum(state, getters) { // console.log(arguments) // num的二倍 return state.num * 2; } }, // 同步消息 mutations: { // 增加数字方法 addNum(state, num) { // console.log(this, arguments) // 更新数据 state.num += +num; }, // 减少数字方法 reduceNum(state, num) { // console.log(this, arguments) // 用num更新state中的数据 state.num -= num; }, // 清空数字方法 clearNum(state, num) { // 清空数字 state.num = num; } }, // 异步消息 异步消息要通过同步消息获取 actions: { // 清空数字方法 clear(store, num) { // 定义 异步操作 setTimeout(() => { // 发布同步消息 store.commit('clearNum', num) }, 2000) } } ｝ ｝})// 增加数字组件let AddNum = Vue.extend({ template: `num:{ {$store.state.num}}--{ {$store.getters.dealColor}}
//这里使用的局部storenum:{ {$store.state.str.num}} --{ {$store.getters.doubleNum}}
`, // 组件创建完成 created() { console.log('showNum', this) }})// 实例化new Vue({ // 3 注册store store, // 视图 el: '#app', // 注册组件 components: { AddNum, ShowNum }, // 数据 data: {}, // 方法 父组件中同样是通过$store.commit 获取同步消息 methods: { // 发布减少数字消息 sendReduceNumMessage() { // 发布同步消息 // 多个数据，放在数组或者对象中 // this.$store.commit('reduceNum', [2, 5, 100, true]) this.$store.commit('reduceNum', 2) } }, // 组件创建完成 created() { console.log('app', this) }})
转载地址：http://wlven.baihongyu.com/