小白角度理解VUEX（包含理解，demo和小项目）

前言：

       刚开始学习vuex的时候，看文档，博客和视频，感觉一脸懵逼，感觉没得到什么帮助。现在又重新开始，就不信搞不懂。

       这篇文章就是以我这样一个小白的角度手把手的讲解我对vuex的：1.理解；  2.demo;  3.记事本的项目。

在这，附上demo和项目的源码地址，如果需要就去看看，如果觉得得到帮助麻烦给颗星星

---

正文开始了：

1.使用vuex的原因：

       项目中会有多个组件共同依赖一个状态，并且这回组件中的操作会共同改变这个状态。这样就会很混乱，所以就要使用vuex把多个组件共享的状态抽出来，统一管理，这样就方便很多，而且很清晰。

2.说说vuex都有啥：

      每一个 Vuex 应用的核心就是 store，里面又包括:

1.state(用来存放数据源，就是公共状态)；

2.actions(存放要执行的操作，相当于事件)；

3.mutations(变换，对state进行状态改变)。

      所以，一个完整操作流程就是：

用户在组件中的操作(例如单击按钮)===>actions commit到mutations===>mutations中对state进行变换===>变换后的state返回到组件渲染更新

3.简单demo体会一下vuex工作流程

1）第一步：安装vuex

在项目根目录下执行：cnpm install vuex -D

先来看看demo的效果：

demo效果图

2）第二步：在组件中执行操作请求改变状态

组件事件触发请求

3）第三步：mapActions 工具函数会将 store 中的 dispatch 方法映射到组件的 methods 中

mapActions

4)第四步:action去commit mutations

actions

5)第五步：mutation来改变状态，也就是数据（注：只能通过mutations来修改数据）

mutations修改数据

6）第六步：getters获取数据变化，返回到组件的计算属性，更新组件

getters 根组件计算属性

       到现在，整个流程就走完了，感觉怎么样？？？有收获吗？？？我觉得读完这篇文章就算不知道每个部分是做什么的，怎么写每部分的代码，但是整个流程也应该清楚了。代码怎么写还是得自己多练练手