VUE模板获取Mutations及mapMutations传参

在vuex中mutations是专门用来修改state中属性状态的方法集合（对象），同时，我们也了解到，在组件中可以使用$store.commit('方法名'， 传参) 来提交修改请求，这种方法比较简单。下面我们再看一种写法：

组件中模块模板获取Mutations: mapMutations

mapMutations的写法和上文提到的mapState的写法基本一致，这里我们主要使用数组的形式来说明：

1首先再组件中引入vuex 的 mapMutation的方法：

import{ mapMutations} from 'vuex'

然后在methods中这样写：

methods：{

...mapMutations(['add',' reduce'])

}

<template>
<div>
<h1>{{msg}}</h1>
<h1>{{count}}</h1>

<div>
  <button  @click="add"> 加 </button>

<button  @click="reduce"> 减</button>
</div>


</div>




</template>
<script>
import { mapState, mapMutation} from 'vueX';

     export default {
        data(){
      return{
     msg:' hello word'
}          
},

methods:{
  ...mapMUtations(['add','reduce'])
},
computed:{
...mapState(['count])
}
}
</script>

大家可以看出，这样的写法可以让我们在组件中像写普通方法一样，直接调用mutations里的方法，把mutations里的方法名直接写在需要调用的地方就行

那么，问题来了，之前我们也说过，mutations对象中的方法是可以传参的（payload），那么在mapMutations中如何传参呢？

其实很简单：

结合上文，假设我们还是调用mutations中的add方法，在组件的button中，每点击一次count+5，我们只需要这样写：

<button @click='add(5)'>加</button>   //像写一般的方法一样，直接在方法名后面的( )中将需要传递的参数写进去

如图，组件中：

store/index.js中：

以上就是模板获取Mutations及mapMutations传参的方法，小伙伴你看懂了吗？欢迎留言共同探讨～