在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传参的方法,小伙伴你看懂了吗?欢迎留言共同探讨~