新手不得不学的vuex

这次讲解的例子依旧是经典的计数方法

不过讲解之前，我们先了解一点简单的内容，作为前期的一个小小的铺垫，要讲vuex就不能不说一下它的状态管理

这个就是vuex的工作原理，components是vue的组件，这些组件会发出它的事件。例如当我点击的时候（dispatch），我会触发一个行为actions，这里要注意，这个actions并不是直接去改变state（状态或者数据），它只是说明你要做什么操作，例如要增加数据要更新数据还是要删除数据，然后会提交一个commit，commit会关联到mutations，这个mutations才是更改 Vuex 的 store 中的状态的唯一方法，接着就是改变state，重新渲染到组件上，这就是一整个流程。

现在开始布局，这次不用一个store.js文件，如果对于大型项目而言，全部写在一个js文件就显得有点大，所以，在components中建立一个文件夹，命名为store，项目结构如下

sumPage就是计数组件，内容如下

通常我们一般的写法就像下图一样

但是状态或者方法多了，写在一起感觉又太多，这时可以用vuex提供的两个便捷的方法 vuex的两个方法

mapActions： 管理所有的事件（行为）

mapGetters： 获取数据

数组中存放的是方法名，当然如果你想将一个 getter 属性另取一个名字，使用对象形式：

这样就能将状态和方法都放在store中进行管理

接着就是store的目录结构，

index.js：这是store的入口文件， getter.js：可以认为是 store 的计算属性 actions.js：处理你要干什么，一般是异步请求，判断，流程控制等，并不直接修改数据，而是触发mutation修改数据 mutations.js：处理状态（数据）的变化 types.js：是用来定义方法常量

现在是看看每个文件的内容讲解 index

然后建立一个actions文件

方法名在types中进行管理命名

然后是getter计算属性

最后是mutation进行状态改变

最后运行的时候，整个简单vuex的这样完成了，当然 以上仅仅是本人的陋见，仅供参考