一篇文章理解vuex原理

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中的数据

第五步一个组件发布消息


<body><div id="app"><!-- 父组件 --><button @click="sendReduceNumMessage">减少2</button><!-- 子组件 --><add-num></add-num><show-num></show-num></div>
<script type="text/javascript" src="dist/02.js"></script>// 引入vue
import Vue from 'vue';
// 引入Vuex  使用解构 引入store
import Vuex, { Store } from 'vuex';类型下面这种(我说的我感觉应该特别细了)
// import Vuex from 'vuex';
// import { Store } from 'vuex';// 1 安装
Vue.use(Vuex);// 2 实例化 store
let store = new Store({// state存储组件间共享的数据state: {num: 0},// 计算属性数据  类似computedgetters: {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: `<div>//获取store中的同步消息用$store.commit<button @click="$store.commit('addNum', 5)">增加5</button>//获取store中的异步消息通过$store.dispatch<button @click="$store.dispatch('clear', 0)">2秒之后清空</button></div>`,// 组件创建完成created() {console.log('addNum', this)}
})
// 显示数字组件
let ShowNum = Vue.extend({  // 4 一个组件使用数据  这里子组件通过$store获取store中的数据 这里获取了store中的的属性值 以及！！！ getters计算属性数据中的.doubleNum方法template: `<h1>num:{{$store.state.num}} -- {{$store.getters.doubleNum}}</h1>`,// 组件创建完成created() {console.log('showNum', this)}
})// 实例化
new Vue({// 3 注册storestore,// 视图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 不允许同名


<body><div id="app"><!-- 父组件 --><button @click="sendReduceNumMessage">减少2</button><!-- 子组件 --><add-num></add-num><show-num></show-num></div>
<script type="text/javascript" src="dist/02.js"></script>// 引入vue
import Vue from 'vue';
// 引入Vuex  使用解构 引入store
import Vuex, { Store } from 'vuex';类型下面这种(我说的我感觉应该特别细了)
// import Vuex from 'vuex';
// import { Store } from 'vuex';// 1 安装
Vue.use(Vuex);// 2 实例化 store
let store = new Store({// 全局数据state: {num: 10,},// 计算属性数据getters: {dealColor(state) {return state.color.toUpperCase();},// 同名计算属性数据，不允许定义// doubleNum() {}},// 全局消息mutations: {addNum(state, num) {state.num += num;}},//这里来切割模块 定义局部的storemodules: {// 命名空间是strstr: {// state存储组件间共享的数据state: {num: 0},// 计算属性数据  类似computedgetters: {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: `<div>//获取store中的同步消息用$store.commit<button @click="$store.commit('addNum', 5)">增加5</button>//获取store中的异步消息通过$store.dispatch<button @click="$store.dispatch('clear', 0)">2秒之后清空</button></div>`,// 组件创建完成created() {console.log('addNum', this)}
})
// 显示数字组件
let ShowNum = Vue.extend({  // 4 一个组件使用数据  这里子组件通过$store获取store中的数据 这里获取了store中的的属性值 以及！！！ getters计算属性数据中的.doubleNum方法template: `<!-- 全局数据可以直接使用 计算属性也重新调用 --><h1>num:{{$store.state.num}}--{{$store.getters.dealColor}}</h1>      //这里使用的局部store<h1>num:{{$store.state.str.num}} --{{$store.getters.doubleNum}}</h1>`,// 组件创建完成created() {console.log('showNum', this)}
})// 实例化
new Vue({// 3 注册storestore,// 视图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)}
})