Vuex是什么
Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果你想想修改这个全局对象的数据？是可以的，但没那么简单，你得按照Vuex提供的方式来修改，不能自己随意用自己的方式来修改。
使用Vuex的好处
为什么说只是类似全局对象呢？
说的是类似，就代表它跟我们之前使用的定义全局对象变量还不完全一样。主要有一下两点不同：
-
1.Vuex的状态存储是响应式的，什么意思呢？就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。
-
2.你不能直接修改Vuex的状态，如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。
以上两点是Vuex状态管理跟使用传统全局变量的不同之处，也是Vuex的优势所在。那是不是所有使用vue开发的SPA（single page application）单页应用都适合采用Vuex呢？
适用场景
当然也不是，如果你的应用是个小型的应用，组件不多，组件之间的状态依赖不多，关系清晰容易维护，也就是说不同组件之间很少有数据之间的关联的话，那么你大可不用Vuex来开发。
反之，如果你开发的是较大型的应用，出现多个视图组件共同依赖一个状态，这个状态相当于我们的全局对象数据，其他组件的改动，会影响到它，反之，它的修改也需要更新其他关联的组件，那么Vuex就很适用。比如：商城系统，外卖系统等等。
如何使用Vuex
（1）创建仓库Store
要使用Vuex，我们要创建一个实例 store ，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理。
//创建一个 store
const store = new Vuex.Store({});
（2）核心：state
Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。
//创建一个 store
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数：5
}
});
上面的例子中，假设我们有一个全局状态count的值为5。那么，我们就可以将其定义为 state 对象中的key和value，作为全局状态供我们使用。
state 中的状态被各个组件关联着，在开发调试过程中，我们可以结合vue-devtool工具，可以清晰地看到整个应用的数据，非常方便。
（3）核心：Getters
当我们需要在data的基础上再派生一些状态的时候，就会使用computed来实现。
同样，当我们需要从 state 中派生出一些状态的时候，就会使用到 getters ，你可以将 getters 理解 state 的计算属性。
getters 接受 state 作为其第一个参数：
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数：5
},
//派生出来的状态
getters:{
//ES6 的箭头函数语法
newCount:state => state.count * 3
}
});
（4）核心：Mutations
Vuex给我们提供修改仓库 store 中的状态的唯一办法就是通过提交mutation。我们来看看如何定义一个mutation，它和上面的 getters ，会接受 state 作为第一个参数：
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数：5
},
//更改store状态的唯一途径
mutations:{
increment(state){
state.count ++;
}
}
});
我们再 mutations 中定义了一个叫increment的函数，函数体就是我们要进行更改的地方，可以看到，我们只是简单地对 state 中的count进行了自增运算。
mutations 我们是定义好了，怎么使用呢？
Vuex要求我们要想通过 mutations 更改内容，就必须提交mutation，语法如下：
//提交一个名为increment的mutation
store.commit('increment');
我们再提交commit 时候，字符串参数increment,就是对应在 mutations 中的increment。
此外，store.commit( ) 还接受其他额外的参数，比如：
//...
//更改store状态的唯一途径
mutations:{
increment(state,n){
state.count += n;
}
}
//...
store.commit('increment',10);
我们在提交的时候额外传了参数10，只要在定义 mutations 的时候定义与之相对应的形参就可以处理了。