二:载荷

1.定义方式，一看即明白,state默认是第一个参数，第二个参数就是载荷

                                            
Mutation{
    incrementpayload (state,payload){
         state.count+=payload.amount;
    }
}
      
                                            
                                        

看出载荷有什么用了吗?在上一节只能对state进行自改变，现在可以传入载荷值，改变状态会更加有弹性

2.调用方式,作为一个参数，载荷可以是一个值也可以是一个对象，赞成使用对象；对象中可以定义各种值

                                            
// 带有载荷的mutation函数调用方式

// 调用方式一 
store.commit('incrementpayload',{
  amount:10
});

// 调用方式二  
store.commit({
    type:'incrementpayload',
    amount:20
});
                                            
                                        

3.在所有组件中调用，如何在组件中获取到store的全局Mutation呢

                                            
// 通过this.$store来找到store

// 调用方式
this.$store.commit('incrementpayload',{
    amount:20
});
                                            
                                        

在这里提出一个问题如下，如果一个组件中要commit很多个Mutation函数呢，会出现如下情况

                                            
this.$store.commit('increment0')
this.$store.commit('increment1')
this.$store.commit('increment2')
this.$store.commit('increment3')
this.$store.commit('incrementpayload',{
    amount:10
});
this.$store.commit('incrementpayload',{
    amount:20
});
                                            
                                        

所以VUE提出了一个解决方案，辅助函数mapMutations，只是通过它来简写调用方式；下面详解

三:使用mapMutations

1.在组件中使用mapMutations，原理是简化过长的this.$store.commit

2.在main.js中定义了两个mutation方法，一个带载荷，一个不带，increment和increment1

                                            
const store = new Vuex.Store({
  state: {
    count: 2
  },
  mutations: {
    increment (state) {
      state.count++
    },
    increment1 (state,payload){
      state.count+=payload.amount;
    }
  }
})
                                            
                                        

3. 在子组件child1中使用一个辅助函数，定义的方式有如下两种

                                            
methods:{
    ...mapMutations([    
        'increment',        // 方式一  直接使用以前的mutation函数名
        'increment1'
    ]),
    ...mapMutations({
        add: 'increment'   //  方式二 定义一个别名
    })，
    count(){
        this.$store.commit(‘increment1’,{
            amount:20
        });
   }
}
            
                                            
                                        

4. 调用经过辅助函数映射过的mutation函数；和调用普通函数一样的

                                            
this.increment();   // 不带载荷
this.increment1({amount:20});  //带载荷
this.add({amount:20});   // 别名的方式
this.count(); //调用普通函数
                                            
                                        

刚开始不理解不要紧，只有知道辅助函数顾名思义就是辅助代码编写，让代码维护更加便捷，编写更加方便

四:使用常量替代mutation函数名

1. 上面的辅助函数，使得注册mutation函数很方便，这里再介绍一个更加方便的技术，其实就是让我们的方法名可以动态改变；这在较大的项目中应用比较方便；一般项目可以不用

2. 基本思路，定义一个常量；然后定义和调用mutation函数的时候使用

                                            
// mutation-types.js   定义常量的地方
var types={
    mutationFn1:'increment1',
    mutationFn2:'increment2',
    mutationFn3:'increment3'
}
export default types

// main.js           定义mutation的时候使用常量计算属性作为函数名
import types from './mutation-types'
const store = new Vuex.Store({
  state: {
    count: 2
  },
  mutations: { 
    [types.mutationFn1] (state) {
      state.count--
    },
    [types.mutationFn2] (state) {
      state.count++
    },
    [types.mutationFn3](state,payload){
      state.count+=payload.amount;
    } 
  }
})

// 在组件child1 中使用
import types from './mutation-types'
methods:{    
    ...mapMutations({
        add:[types.mutationFn1],
        delete:[types.mutationFn2],
        show:[types.mutationFn3]
    }),
    count(){
     return this.$store.state.count 
    }
}
                                            
                                        

这样设计的好处，如果以后要更改全局mutation的某一个函数名，只需要变更对应常量值即可