还有不懂Vuex吗？看完你就理解了

作者：web前端攻城狮陈某

1.什么是vuex?

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

2.什么又是状态管理呢?

让我们从一个简单的 Vue 计数应用开始：

这个状态管理包括三个部分：

state，驱动应用的数据源;

view，以声明方式将 state 映射到视图;

actions，响应在 view 上的用户输入导致的状态变化。

3.vuex的工作流程

vue官网给的流程图

首先，Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时，需要dispatch VueX中actions的方法，以保证数据的同步。可以说，action的存在就是为了让mutations中的方法能在异步操作中起作用。

如果没有异步操作，那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。注意，1.3.3节中有提到，不建议在组件中直接对state中的成员进行操作，这是因为直接修改(例如：this.$store.state.name = 'hello')的话不能被VueDevtools所监控到。

4. Mutations

mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。

4.1 Mutations使用方法

state是当前VueX对象中的state

payload是该方法在被调用时传递参数使用的

例如，我们编写一个方法，当被执行时，能把下例中的name值修改为"jack",我们只需要这样做

index.js

而在组件中，我们需要这样去调用这个mutation——例如在App.vue的某个method中:

this.$store.commit('edit')

5.Actions

由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

Actions中的方法有两个默认参数

context 上下文(相当于箭头函数中的this)对象

payload 挂载参数

例如，我们在两秒中后执行2.2.2节中的edit方法

由于setTimeout是异步操作，所以需要使用actions

6.规范目录结构

对应的内容存放在对应的文件中，和以前一样，在index.js中存放并导出store。state中的数据尽量放在index.js中。而modules中的Astore局部模块状态如果多的话也可以进行细分。