Vuex是一个专门为vue.js应用程序开发的状态管理模式，可以理解为共享的data，它一共有五种默认的状态：
- state：存储状态（变量）
- getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
- mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
- actions：异步操作。在组件中使用是$store.dispath('')
- modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。
修改State”拆分成两部分：视图触发Action，Action再触发Mutation。
Mutation：专注于修改State，理论上是修改State的唯一途径。必须同步执行（相当于method）。
Action：业务代码、异步请求。可以异步，但不能直接操作State。（相当于created中的axios）
Store: 定义变量（相当于data）。
举例：
1、首先在store.js文件中导入相应文件，并定义好变量
import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations';
import actions from './actions';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
userInfo: {}
}
mutations,
actions
});
2、在mutations.js中定义修改info的函数
3、在action.js中写异步请求的函数
注意：刷新页面时vue实例会重新加载，store就会被重置，如果不是通过当前页面进行变量的修改，则刷新后是没有数据的。因此可以在定义刷新前把store存入本地localStorage、sessionStorage、cookie中，localStorage是永久储存，重新打开页面时会读取上一次打开的页面数据，sessionStorage是储存到关闭为止，cookie不适合存大量数据。可根据自己的需求选择合适的方法来解决刷新的问题，以下以sessionStorage为例：
export default new Vuex.Store({
state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
userInfo: {},
},
mutations,
actions
});
即先将state数据存储在sessionStorage中，每一次获取state时就从sessionStore中拿取。