必备：「vue基础」写给 Vuex 初学者的使用指南

　　大家好，在前面的几篇文章里我们一起学习了Vue相关的基础知识，想复习基础的同学可以点击文末链接进行回顾。今天我们将学习 Vue 的 State Management（状态管理）：Vuex，我们在构建大型应用时 ，State Management 的处理至关重要。

　　随着业务的增加，我们的应用程序也变得越来越复杂，每个组件都有自己的数据状态，再加上组件之间的数据传递问题，一个数据的变化会影响好几个组件的连锁反应，这就增加了我们定位问题的难度。

　　因此要解决上述问题，我们就要集中管理数据，在多个组件中共享数据状态时——比如用户的登录信息或者UI组件的呈现状态（按钮禁用或加载数据）。

　　幸运的是，我们不需要手工去完成 State Management 的工作，许多流行的框架都能帮助我们管理数据状态，你可能听说过Redux——React生态中比较流行的状态管理解决方案。Vue当然也有自己的官方解决方案，称作Vuex。他们共同的特点就是帮助我们集中管理数据状态以及任何组件无需要父子关系，也能很容易进行数据之间的交互。

　　那我们如何使用Vuex呢？在使用之前，我们先看下下张图，这张图很好的诠释了 Vuex 的运行机制，理解了这张图，你就可以很快的上手Vuex的使用了。

　　要掌握Vuex理解以下几个概念很重要：

　　整个应用的数据中心，应用的相关组件在这里获取数据或更新数据，是整个应用唯一的数据中心。

　　数据中心的管家，只能在数据中心的内部进行更改，外部组件无法进行直接更改State，只能依赖dispatch action（行为调度） 或 commit a mutation（提交mutation）间接操作。

　　Getters 的本质就是 Vuex store 的 computed 属性，读取 store/state 的内容，Getters中的数据将会被缓存，数据更新时其依赖的相关组件状态也随之及时更新。

　　在应用中共享全局数据状态时，也会导致一些问题，因为数据的改变可以来自任何组件，因此很难定位和跟踪数据的状态。

　　因此 Vuex 提出了使用 Mutations 这种方式进行更改数据的状态，并不是直接进行更改，其 Vue devtools 工具能很好很准确帮我定位哪些更改以及何时进行的更改。

　　如果你使用过 Redux ，Mutations 的概念很类似 reducer，其作用也是对数据状态进行更改。

　　如果要执行异步任务或多个相关的Mutations去更新数据状态时，我们需要 Actions 去定义函数进行操作，其函数第一个参数 context 可以获 state , commit 和 getters 的相关属性，方便我们组织定义更复杂的逻辑。比如我们常用的接口数据请求获取数据，就会经常用到Actions。

　　最后做下总结，我们使用 Store/State 定义和管理应用的核心数据，在组件中通过compute属性调用Getters 中的数据，如果我们要操作数据，我们可以通过使用 dispatch 方法调用已注册的 Actions 方法，Actions 再去调用相关的 mutations 进行数据的操作。

　　接下来我们亲自动手做一个简单的练习，通过代码进一步的了解Vuex，废话不多说，我们开始吧！

　　假设我们通过 CLI 工具创建了一个Vue 项目（使用默认预设），如果我们要使用 Vuex 就要安装相关依赖，安装命令如下：

　　依赖安装完成后，我们需要将Vuex实例进行注册，接下来我们在src目录里新建个 store.js ，示例代码如下：

　　src/store.js

　　我们在 Vuex.store 构造函数里传入一个对象，含有 state , mutations 及actions 这几个核心属性，不用担心，我们来一步步逐一实现，接下来我们打开 main.js 文件，在Vue实例里进行注册，示例代码如下：

　　src/main.js

　　完成上述操作后，我们就能很方便的通过 this.$store 访问 store 实例的内容。

　　State 本身就是一个 JS 对象，创建的数据可以在不同的组件中进行共享，比如初始化一个购物车的数据，示例代码如下：

　　状态属性的值可以包含任何有效的数据类型，接下来我们可以在组件中使用 computed 进行数据的获取，比如我们要获取顾客的名字，示例代码如下：

　　上述代码我们通过 store 实例进行数据获，也许你会觉得这样获取很啰嗦，Vuex 提供了一个工具函数能很方便的获取 store 实例的数据。

　　使用 mapState 方法，示例代码如下：

　　mapState() 方法使用 ES6 的新语法 ... 帮助我们获取 State 中的数据，只需要在函数里传递State对应的属性值即可，这样是不是很简单呢。

　　Getters 的本质就是 Vuex store 的 computed 属性，它允许你可以在不同组件之间共享数据状态，就和组件的 computed 属性是一样的，其中的数据将会被缓存，数据发生变化时，进行动态计算，实时反馈。

　　比如我们要获取购物车商品的商品种类，示例代码如下：

　　在组件中使用 getter 方法来获取 store/state ，我们需要创建一个 computed 属性进行调用，示例代码如下：

　　同样 Vuex 提供了一个更便捷的方法 mapGetters() 快速调用 getter，我们传递getters 对象的属性值即可，示例代码如下：

　　如果我们要进行数据状态的更新，我们可以使用 Mutations 进行方法的定义，比如我们要更新购物车顾客的姓名，示例代码如下：

　　接下来我们在调用的组件里定义方法，通过调用 mutations 的 setCustomerName 的方法进行数据操作，这里我们使用 commit() 方法进行调用，示例代码如下：

　　上述代码，我们通过一个文本输入框组件，进行顾客姓名信息的更改，同样，你也猜到了，Vuex也提供了 mapMutations 方法，快速获取对应的属性方法，简化后的调用方法，示例代码如下：

　　你可能注意到，我们这里的操作是同步的，如果操作的数据需要等待，或者比较费时间，比如我们需要异步请求（AJAX）后端的数据，我们就需要使用 actions ，这就是其存在的理由。

　　讲到这里，你也许会这样理解，state 就好比 store/ state 的状态树，我们通过 commit 方法去调用mutations 定义的方法属性去更新数据状态，使用 getters 属性定义获取状态树的数据集合。

　　Actions 则为我们提供了异步获取后端数据API接口的规则，比如我们要获取一组用户列表信息，示例代码如下：

　　在上述例子里，我们定义了数据请求中的状态，默认为false，请求数据时将其定义为true，请求完毕或接口异常时，将其重置为初始值。之所以定义这个状态值，方便前端组件进行UI的展示，提示用户数据正在加载中。

　　接下来我们可以通过 Vuex Store 提供的 this.$store.dispatch() 方法调用actions 定义的方法，但是也可以通过 mapActions() 来简化代码的调用，示例代码如下：

　　通过以上代码示例，想必大家对 state，store，getters, mutations，actions 有了更深刻的认识吧。

　　最后我们做一个完整的例子，对上述的学习进行一个巩固，我们来做一个用户信息列表和一个用户信息详细页，通过后端接口的形式进行获取。

　　我们先通过 CLI 脚手架使用 manually 创建项目，确保我们选择了 Vue Router 和 Vuex 选项，创建完成后，我们修改下项目的 index.html 页面，添加一些基础的CSS样式信息。示例代码如下：

　　public/index.html