Vuex是一个专为Vue.js设计的状态管理库，适用于多组件共享状态的场景。Vuex能集中式的存储和维护所有组件的状态，并提供相关规则保证状态的独立性、正确性和可预测性，这不仅让调试变得可追踪，还让代码变得更结构化且易维护。本文所使用的Vuex，其版本是3.1.1。

一、基本用法

　　首先需要引入Vue和Vuex两个库，如果像下面这样在Vue之后引入Vuex，那么Vuex会自动调用Vue.use()方法注册其自身；但如果以模块的方式引用，那么就得显式地调用Vue.use()。注意，因为Vuex依赖Promise，所以对于那些不支持Promise的浏览器，要使用Vuex的话，得引入相关的polyfill库，例如es6-promise。

<script src="js/vue.js"></script><script src="js/vuex.js"></script>

　　然后创建Vuex应用的核心：Store（仓库）。它是一个容器，保存着大量的响应式状态（State），并且这些状态不能直接修改，需要显式地将修改请求提交到Mutation（变更）中才能实现更新，因为这样便于追踪每个状态的变化。在下面的示例中，初始化了一个digit状态，并在mutations选项中添加了两个可将其修改的方法。

const store = new Vuex.Store({   state: {     digit: 0   },   mutations: {     add: state => state.digit++,     minus: state => state.digit--   } });

　　接着创建根实例，并将store实例注入，从而让整个应用都能读写其中的状态，在组件中可通过$store属性访问到它，如下所示，以计算属性的方式读取digit状态，并通过调用commit()方法来修改该状态。

var vm = new Vue({   el: "#container",   store: store,   computed: {     digit() {       return this.$store.state.digit;     }   },   methods: {     add() {       this.$store.commit("add");     },     minus() {       this.$store.commit("minus");     }   } });

　　最后将根实例中的方法分别注册到两个按钮的点击事件中，如下所示，每当点击这两个按钮时，状态就会更新，并在页面中显示。

<div id="container">  <p>{{digit}}</p>  <button @click="add">增加</button>  <button @click="minus">减少</button></div>

二、主要组成

　　Vuex的主要组成除了上一节提到的Store、State和Mutation之外，还包括Getter和Action，本节会对其中的四个做重点讲解，它们之间的关系如图2所示。

图2  四者的关系

1）State

　　State是一个可存储状态的对象，在应用的任何位置都能被访问到，并且作为单一数据源（Single Source Of Truth）而存在。

　　当组件需要读取大量状态时，一个个的声明成计算属性会显得过于繁琐而冗余，于是Vuex提供了一个名为mapState()的辅助函数，用来将状态自动映射成计算属性，它的参数既可以是数组，也可以是对象。

　　当计算属性的名称与状态名称相同，并且不需要做额外处理时，可将名称组成一个字符串数组传递给mapState()函数，在组件中可按原名调用，如下所示。

var vm = new Vue({   computed: Vuex.mapState([ "digit" ]) });

　　当计算属性的名称与状态名称不同，或者计算属性读取的是需要处理的状态时，可将一个对象传递给mapState()函数，其键就是计算属性的名称，而其值既可以是函数，也可以是字符串，如下代码所示。如果是函数，那么它的第一个参数是state，即状态对象；如果是字符串，那么就是从state中指定一个状态作为计算属性。

var vm = new Vue({   computed: Vuex.mapState({     digit: state => state.digit,     alias: "digit"        //相当于state => state.digit  }) });

　　因为mapState()函数返回的是一个对象，所以当组件内已经包含计算属性时，可以对其应用扩展运算符（...）来进行合并，如下所示，这是一种极为简洁的写法。

var vm = new Vue({   computed: {     name() {},     ...Vuex.mapState([ "digit" ])   } });

2）Getter

　　Getter是从State中派生出的状态，当多个组件要对同一个状态进行相同的处理时，就需要将状态转移到Getter中，以免产生重复的冗余代码。

　　Getter相当于Store的计算属性，它能接收两个参数，第一个是state对象，第二个是可选的getters对象，该参数能让不同的Getter之间相互访问。Getter的返回值会被缓存，并且只有当依赖值发生变化时才会被重新计算。不过当返回值是函数时，其结果就不会被缓存，如下所示，其中caculate返回的是个数字，而sum返回的是个函数。

const store = new Vuex.Store({   state: {     digit: 0   },   getters: {     caculate: state => {       return state.digit + 2;     },     sum: state => r