调用Mutation函数的方式
第一种:this.$store.commit()
// 触发mutation
methods: {
handle1() {
//触发mutations的第一种方式
this.$store.commit ( 'add ' )
}
}
可以在触发mutations 时传递参数:
//定义Mutation
const store = new vuex.store({
state: {
count: 0,
},
mutations: {
addN (state, step){
//变更状态
state.count += step
}
}
})
第二种:将指定的 mutations函数,映射为当前组件的methods函数
this.$store.commit()是触发mutations的第一种方式,触发mutations的第二种方式:
// 1.从vuex中按需导入mapMutations函数
import ( mapMutations ] from 'vuex'
通过刚才导入的mapMutations函数,将需要的mutations函数,映射为当前组件的methods方法:
// 2.将指定的 mutations函数,映射为当前组件的methods函数
methods : {
...mapMutations ( [ 'sub', 'subN' ])
}
减法计算器应用实例
减法计算器示例:
<template>
<div>
<!-- 访问共享数据count {{ count }} -->
<h3>当前最新的count值为:{{ count }}</h3>
<button @click="btnhandler1">-1</button>
<button @click="btnhandler2">-N</button>
</div>
</template>
<script>
// 1.从 vuex中按需导入mapstate函数
import { mapState, mapMutations } from 'vuex'
export default {
data() {
return {}
},
// 2.将全局数据,映射为当前组件的计算属性
computed: {
...mapState(['count']),
},
methods: {
// 把store中的sub函数 映射为当前组件的mutations
...mapMutations(['sub', 'subN']),
btnhandler1() {
this.sub()
},
btnhandler2() {
this.subN(3)
},
},
}
</script>