简单解析vuex的工做流程

一、

     Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

官网： vuex.vuejs.org

首先要安装： cnpm install vuex -D

二、

vuex官方上提供了一个vuex的工做流程图：

乍一看上去，有点懵逼。。。这特么画的是啥啊？？？

废话很少说了，这样，咱们能够经过一个点击按钮而后监听数据加减的小实例来分析一下整个流程：

2.1）

vuex提供了两个很是靠谱的方法：mapActions（管理全部的事件）和mapGetters（获取全部的数据）

2.2）

给一个按钮绑定点击事件increment，而后经过vuex提供的mapActions方法中来管理这个increment方法，mapActions默认传递进去的是一个数组，监听的事件方法时已字符串的形式传递到数组中去，如有多个相似的方法，用逗号隔开便可。

当咱们在app.vue这个组件中点击这个按钮的时候，此时触发了dispatch事件

2.3）

咱们能够在main.js同一级建一个store.js用来处理点击按钮后vuex的整个工做的流程。

2.4）

上边点击按钮触发完dispatch事件后会将咱们定义的increment方法传递到Actions中，Actions接收完后调用此方法，而且传入一个actions自带的commit对象。最后将commit对象调用后将其传递到下一步mutations中。

2.5）

mutations接收后调用increment方法，此时须要传递一个默认您参数，咱们将其定义为state，而且声明一下

2.6）

最后经过mapGetters来渲染通过store.js处理的数据，那么此时count方法也一样是须要咱们在store.js中来定义的

声明一个getters 用来处理上边通过加工的state对象

最终咱们将上述定义的全部对象都要在Vuex.Store方法下导出

2.7）

经过vue-tools来调试能够很清楚的发现vuex里的一些属性和方法在发生变化

小结：

      这样一个完整的 用vuex来实现点击按钮增长数据的小demo就实现了，点击按钮数据减小同理。按照上述官网提供的vuex的工做流程图就完整的跑完了。。。本人第一次发文，有写的不对的地方，欢迎各位大神指正！！！