Vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
上面说的是官方原话，翻译成大白话就是：Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果你想想修改这个全局对象里面的数据，是不可以直接进行修改的，你得按照Vuex提供的方式来修改。
Vuex的特点
- Vuex的状态存储是响应式的。就是当你的几个组件都使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据。
- 不能直接修改Vuex的状态。它的修改方式并不能像全局变量那样来直接修改，而是通过
mutations来实现修改，这样做的好处是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。 - Vuex存储的数据会在页面刷新之后重置为初始化状态，并不能让数据持久化。
Vuex适用场景
如果项目是个小型的应用，组件不多，组件之间的状态依赖不多，关系清晰容易维护，也就是说不同组件之间很少有数据之间的关联的话，那么你大可不用Vuex来开发。
如果你开发的是较大型的应用，出现多个组件共同依赖一个状态，这个状态相当于我们的全局对象数据，其他组件的改动，都会影响到这个公共数据；反之，这个公共数据的修改也会影响到关联它的组件，再比如说组件与组件之间在不同的路由中，它们之间无法进行数据传递，这时就可以借助Vuex帮我们来实现公共数据的管理。
Vuex的使用
首先要在项目中安装vuex
cnpm install vuex --save
然后我们在项目的根目录中创建一个store文件夹，在这个文件夹下创建index.js文件，用于存放vuex的数据。
创建仓库Store
要使用Vuex，我们要创建一个实例 store ，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理。
//创建一个 store
const store = new Vuex.Store({});
创建好了仓库之后，就要先了解一下vuex的几个核心
State
State类似全局对象，含了整个应用层级的所有状态，用于存放这些全局变量。
//创建一个 store
const store = new Vuex.Store({
//state存储应用层的状态
state:{
number:1
}
});
上面代码我们创建了一个全局状态变量，值为1。state中的状态变量被各个组件关联着，一旦发生变化，相应的组件状态也会随之改变。这里我们可以借助vue-devtool来查看我们定义在vuex中的全局状态。如下图所示：
Getters
getters的作用类似与vue中的computed计算属性，当我们需要在data的基础上再派生一些状态的时候，就会使用computed来实现。同样，当我们需要从 state 中派生出一些状态的时候，就会使用到 getters ，可以将 getters 理解 state 的计算属性。getters 接受 state 作为其第一个参数：
const store = new Vuex.Store({
//state存储应用层的状态
state:{
number:1
},
//派生出来的状态
getters:{
numberPro:state => {
return state.number+10
}
}
});
这样我们就在state.number基础中派生出了一个新的状态numberPro。
Mutations
Vuex中的状态不能随意修改，要修改必要按照Vuex提供的方式才能修改，Vuex给我们提供修改仓库store中的状态的唯一办法就是通过提交mutation。我们来看看如何定义一个mutation，它和上面的getters一样，会接受 state 作为第一个参数：
const store = new Vuex.Store({
state: {
number: 1
},
mutations: {
changeNumber (state,value) {
// 变更状态
state.number=value
}
}
})
我们再mutations中定义了一个叫changeNumber的函数，用于更改state中number的值。Vuex要求我们要想通过mutations更改内容，就必须提交mutation，使用方式如下：
store.commit('changeNumber',7);
这样就把state中的number从原来的1更改成7了。
以上3个核心概念了解清楚之后，我们来看看具体如何使用这些全局状态变量，先对index.js代码做如下整理：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
let state = {
number: 1,
};
let mutations = {
changeNumber(state, val) {
state.number= val;
},
};
const store = new Vuex.Store({
state,
mutations,
});
export default store;
然后再项目中main.js做全局引入
import store from './store'
在项目中获取全局变量：
this.$store.state.number;
在项目中修改全局变量：
this.$store.commit("changeNumber", 7);