vuex结构

vuex其实就是对全局状态的一个管理，即集中式存储和管理应用程序中所有组件的状态；
vuex 的核心是store，store相当于一个容器，包含着大部分应用的状态。

vuex结构图如下：

vuex结构图.png

• 如上图所示，
  vuex四个结构，state，getters，mutations，actions。对state进行操作的分为两种，更新和读，读和计算的是getters，更新的是mutations，操作mutations的是actions。

1. states的状态数据流向组件，数据显示在组件上，组件可通过this.$store.state（或者mapState()）获取状态
2. 操作state的，即改变直接更新state的是mutation，读取state计算属性的是getters，可通过$store.getters（或者mapGetters()）获取计算属性结果。
3. 而操作mutation的是action，通过commit()触发。
4. 组件通过dispatch()事件或者消息触发action,action发送异步请求到后台，从后台接收数据，commit()请求到mutation，mutation直接更新改变状态。
5. 开发者工具监测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
  }
}