vuex其实就是对全局状态的一个管理，即集中式存储和管理应用程序中所有组件的状态；
vuex 的核心是store，store相当于一个容器，包含着大部分应用的状态。
vuex结构图如下：
vuex结构图.png
- 如上图所示，
vuex四个结构，state，getters，mutations，actions。对state进行操作的分为两种，更新和读，读和计算的是getters，更新的是mutations，操作mutations的是actions。
- states的状态数据流向组件，数据显示在组件上，组件可通过this.$store.state（或者mapState()）获取状态
- 操作state的，即改变直接更新state的是mutation，读取state计算属性的是getters，可通过$store.getters（或者mapGetters()）获取计算属性结果。
- 而操作mutation的是action，通过commit()触发。
- 组件通过dispatch()事件或者消息触发action,action发送异步请求到后台，从后台接收数据，commit()请求到mutation，mutation直接更新改变状态。
- 开发者工具监测mutation。
import logger from 'vuex/dist/logger' //logger是一个日志插件
const stroe = new Vuex.Store({
states, //状态对象
mutation， // 包含多个更新states函数的对象
actions， //包含多个对应事件回调函数的对象，在action里面直接可以执行异步代码
getters， //包含多个getter计算属性函数的对象
plugins:[logger()], //logger用法
strict:true; //只能通过mutation来更改状态，mutation不支持异步
})
tips：
getters：和 vue中computer一样，来实时监听state值的变化(最新状态)；
mutattions：对象里面可以放改变state的初始值的方法，具体的用法就是给里面的方法传入参数state或额外的参数,然后利用vue的双向数据驱动进行值的改变；
actions：actions也是个对象变量，最大的作用就是里面的Action方法 可以包含任意异步操作，这里面的方法是用来异步触发mutations里面的方法，actions里面自定义的函数接收一个context参数和要变化的形参，context与store实例具有相同的方法和属性，所以它可以执行context.commit(' '),
- ...mapGetters结构示例
const getters = {
a:() => 1,
b:() => 2,
}
function fn(keys) {
const data = {};
// 数组进行遍历
keys.forEach(key => {
if(getters.hasOwnProperty(key)){
data[key] = getters[key];
}
})
return data;
}
export default{
computed: {
...mapGetters(['test']),
...fn(['a','b']) //fn示例
},
mounted(){
console.log(this.a,this.b); // 结果得到 a:() => 1,b:() => 2
}
}
