Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
负责管理整个Vue系统中的数据及变更，所谓的状态其实就是数据。

一、Vuex主要属性：

• state 　　　－－－定义：所有状态
• Getter　　　－－－定义：便捷的状态获取方法
• Mutation　　－－－定义：状态更新方法,只能是同步方法
• Action　　　－－－类似于 mutation
  • 不同在于：Action 是通过提交mutation改变状态，而不是直接变更状态。
  • Action 可以包含任意异步操作。
• Module　　　－－－将 store 分割成模块,防止store树过大.
  • 各个子Module的state中属性名可以相同，因为每个子module在state中是独立的对象，如图：1。
  • 各个子Module中的Getter方法名不能重复，他们被统一放在store实例中，如图：2。
  • 各个子Module中的Mutation方法名最好不要重复，否则一次触发会触发所有子Module中同名的Mutation，从而改变相应子Module中的state。如图3，由于a、b两个Module中的Mutation方法名相同(changeName),结果我用store.commit('changeName','张三')时，把a、b中的name都改了。
  • 各个子Module中的Action方法名跟Mutation一样。

图1：子Module中的属性名可以相同

图2：子Module中的Getter不能重名

图3：子Module中的Mutation最好不要同名

二、Vuex结构

//定义子模块，分别包装子store
const moduleA = {
  state: { name : 'moduleA' },
  getters : {
     getMAName : state => {
        return state.name;
      }
  },
  mutations : {
    changeMAName(state,newName){
       console.log(state);
       state.name = newName;
    }
  },
  actions : {
     changeMANameAction(context,newName){
        context.commit('changeMAName',newName);
      }
   }
}

const moduleB = {
  state: {  name : 'moduleB'  },
  getters : {
     getMBName : state => {
        return state.name;
     }
  },
  mutations : {
     changeMBName(state,newName){
        state.name = newName;
     }
  },
  actions : {
    changeMBNameAction(context,newName){
       context.commit('changeMBName',newName);
    }
  }
}


const store = new Vuex.store({
  /**  ########## 1、State
    *  定义状态(相当于各个属性字段)
    */
    state : {
        name : 'Diana',
        age : 16,
        sex  : girl,
        books : ['语文','数学','英语']
    },
     /**  ########## 2、Getter
      *  接受 state 和 getters
      *  state会被自动传递，不用管，getters也会被自动传递，我们可以拿到getters中的其他的getter方法。
      */
    getters : {
        getName : (state,getters) => {
          return state.name.toUpperCase() + getters.getAge;
        },
        getAge : state => {
          return state.age;
        }
    },
    /**  ########## 3、Mutation
     * 接受 state 和 payload(手动传入的值)
     *  其中 state 会自动传入，不用管，payload需要我们按需传递。
     */
    mutations: {
    //原生mutation
      growUp (state,olderNum) {
        state.age + olderNum;
      }
      //借助ES6的结构 和 Vuex.mapState
      ...Vuex.mapState({
          changeName(state,newName){
              state.name = newName.firstName;
          }
      })
    },
  /**  ########## 4、Action
   *    acton接受一个context，他拥有与store实例相同的属性和方法，但是他不是store！！！
   *   action通过触发mutation来达到改变状态的目的。
   */
    actions: {
      growUpAction (context) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            context.commit('growUp');
            resolve('长大了哦');
          }, 1000)
        })
      }
    },
   /**  ########## 5、Module
    *    拆分store为多个子store
    */
    modules: {
      a: moduleA,
      b: moduleB
    }
});

三、Mutation触发方式

## 1、store实例触发
  // string + payload方式。
  store.commit('growUp',1);  
 //对象方式，type：为要出发的mutation名称，
  store.commit({
        type : 'changeName',
        firstName : 'Elizabeth'
       })
## 2、组件中触发
  this.$store.commit('xxx')；

四、Action触发方式

## 1、store实例触发：
    store.dispatch('growUpAction').then((data) => {
        console.log(data);//长大了哦
    })
## 2、组件中触发：
    this.$store.dispatch('xxx')

五、Getter调用方式

## 1、store实例调用
    store.getters.getName

六、辅助函数，混入 computed中

computed:{

  /**    #####这个没搞明白有啥用######3
  *  mapState 辅助函数， 
  */
  Vuex.mapState({
          changeName(state,newName){
              state.name = newName.firstName;
          }
      })

 /**
  *  mapGetters 辅助函数
  */
  //如果computed的函数名与getters中的一样，则传一个数组即可
  Vuex.mapGetters([
      'getAge',
      'getName',
      // ...
    ])
  //如果想改变getter的名字，可以传一个对象
  Vuex.mapGetters({
    // 映射 `this.age` 为 `store.getters.getAge`
    age: 'getAge'
  })
}

  Vuex.mapActions({
    add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
  })