我们先看看Vuex的运行图

是不是有点懵，新手看确实看不明白，我们结合官网文档来解读vuex的几个常用的概念：

一、安装Vuex

二、state

三、Getter

四、Mutation

五、Action

一、安装Vuex

首先来安装vuex：

npm install vuex --save

核心store仓库：

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，之所以这么说，我们打印store实例看下：

没错！上边 'store'确实包含了所有的状态，比如常用的：state、mutations、actions、getters··· ···· 。。。

vuex与其他单纯的全局对象不同点：

1 · vuex的状态存储是响应式的，当store中的数据发生变化，相对应的组件也会更新。

2 · 更改store中状态（数据）的唯一途径要通过提交（commit）mutations的方式；通俗点说就是：通过mutations中的方法去更改store中的数据。

二、state

state主要是用来存储数据的，不可直接修改

（1）vue组件中读取数据

1 > this.$store.state.xxx

2 > 使用辅助函数mapState

在vue组件中获取vuex中的状态信息最简单的方法就是在计算属性中，通过this.$store.state.xxx来获取；之所以要在计算属性中获取数据，因为vuex的状态管理存储是响应式的，所以每次数据状态的变化，计算属性都能获取到最新的数据状态：

mapState辅助函数

实际开发中，如果state中的包含多个数据状态，在计算属性中使用 this.$store.state.xxx 代码会有些重复、冗余！！！比如上边在计算属性中的代码。幸运的是vuex提供给我们一些辅助函数，帮助我们简化代码，mapState函数，返回到是一个对象，可以生成计算属性：

上边代码，mapState返回的是一个对象，所以可以使用扩展运算符的写法，同时也很容易的将mapState混入（加到）计算属性computed中！！！获取store中的数据不再使用this.$store.state.xxx , 而是可以使用对象键值对的形式来获取store中的数据；也可以使用函数形式获取（使用函数优点在于：可以使用局部this，从而使用store中数据更加灵活！），参数state是一个包含在store中的所有数据对象：

三、Getter

通俗来说getter相当于store中的计算属性。

官方文档：有时候我们需要从store中派生出一些状态（也就是说store中的数据可以通过加工、过滤、重新计算等过滤出一些数据，供vue组件使用），这时getter上场了；

在store中使用getter最大的优点：

（1）你可以在store中，集中处理数据，然后供给各个组件享用，而不需要在各个组件中分别来处理数据了！！！

（2）getter的返回值会根据它所依赖的数据进行缓存，只有依赖数据发生改变时才会重新计算！！！

上边代码，getters接受state作为第一个参数，与即将讲到的mutations一样，参数state是stroe中的所有数据。。。

获取gtter中的数据

与获取state中的数据相似，有两种方式：

(1) this.$store.getters.xxx

(2) 使用辅助函数mapGetters

四、mutations 英文意思：突变、变化

想必对mutations都不是太陌生，对，没错！修改store状态的唯一方法就是通过提交mutations来实现 ！！！

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。（ 官方这句话我理解的意思是：在vue组件中修改store中的数据方法之一，需要使用 this.$store.commit（ ' eventTypeName ' ），而这个字符串参数 就是事件类型同时也是回调函数的名子 ）

触发mutations中的回调函数有两种方式：

(1) this.$store.commit.xxx

在调用$store.commit时，除了参数一事件类型（就是回调函数名字）之外，还可以传第二个参数（官方叫提交载荷Payload），mutations 的回调函数第二个参数就是传过来的载荷Payload，通常情况下载荷Payload是一个对象：

上边代码，在vue组件中触发mutations中的回调函数，使用了2种方法传参；在vue-devtools中能清楚的看到，数据被修改了：

(2) 使用辅助函数mapMutations

与state、getter 类似，需要引入mapMutations

这里我着重说下使用 mapMutations如何传参：

我们都知道使用 this.$store.commit( 'xxx' , params ) 可以传递参数，但是很多人不知道使用mapMutations如何传递参数！！！首先要明白 使用 ...mapMutations(['increment' ]) 里边的字符串参数会被挂载到vue实例上去，实际上它就是一个函数

所以，如果你想使用mapMutations传递参数，你可以这样写：

上边代码，在mounted钩子函数中，为inrement函数传递参数，我们在vue-devtools中查看修改结果：

使用mutation需要注意：

（1）最好提前在stroe中初始化好所有的属性。

（2）如果你想在对象上添加新属性或者修改对象时，有种方法：

使用 Vue.set ( state , 'count' , '123' ) ；三个参数分别表示：在哪个对象中；要添加的属性；属性值是对少。。。

以新对象替换老对象 （没看懂官方这个!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!）

（3）mutations中的函数必须是同步函数，原因是非常难调试，具体原因查看官方文档！

五、Action

先来看下官方文档：Action类似于mutation，不同的地方在于：

1. Action提交的是mutation（通俗点说就是修改的mutations中的状态），而不是直接修改state中的状态
2. Action可以包含任意异步操作（也就是说：在action中可以异步操作数据）

1、看下边官方案例，注册一个简单的action：

在vue-devtools中，可看到数据被修改：

2、使用辅助函数mapActions

3、Action异步流程（官方叫组合Action）

Action通常时候异步的，那么我们如何知道什么时候结束呢？你要明白的是action的处理函数返回的是一个promise对象，而且可以被store.dispatch( ) 处理，stroe.dispatch仍然返回一个promise对象：

下边使用官方文档的例子，模拟一个异步，在组件中可以监控、处理结果：

最后总结一下，还是要多看官网文档，多练习，孰能生巧