vue中的Mutations
目录
一：介绍
二：例子
一：介绍
Vuex 中的 mutation 非常类似于事件：
- 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
- 这个回调函数就是我们实际进行状态更改的函数，并且它会接受 state 作为第一个参数
二：例子
定义状态和mutations:
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0 // 初始化一个计数状态
},
mutations: {
increment(state) {
// 增加计数
state.count++;
},
decrement(state) {
// 减少计数
state.count--;
},
setCount(state, payload) {
// 设置具体的计数值
state.count = payload;
}
}
});
在 Vue 组件中使用这个 Store，并通过提交 Mutation 来改变状态：
<template>
<div>
<p>当前计数：{{ count }}</p>
<button @click="incrementCount">增加</button>
<button @click="decrementCount">减少</button>
<input v-model="newCount" type="number">
<button @click="setNewCount">设置新值</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
data() {
return {
newCount: 0 // 用于绑定输入框的值
};
},
computed: {
// 使用 mapState 辅助函数映射 state 到局部计算属性
...mapState(['count'])
},
methods: {
// 使用 mapMutations 辅助函数映射 mutations 到局部方法
...mapMutations(['increment', 'decrement', 'setCount']),
incrementCount() {
this.increment(); // 提交 increment mutation
},
decrementCount() {
this.decrement(); // 提交 decrement mutation
},
setNewCount() {
this.setCount(Number(this.newCount)); // 提交 setCount mutation 并传入新值
}
}
};
</script>
在这个例子中，我们创建了一个简单的计数器应用。Vuex Store 包含一个状态 count 和三个方法：increment、decrement 和 setCount。Vue 组件通过 mapState 辅助函数将 count 状态映射到局部计算属性，并通过 mapMutations 辅助函数将突变方法映射到局部方法。这样，在组件的模板中，我们就可以通过绑定这些方法到按钮的点击事件来改变状态了。
注意：在 Vuex 4 中，mapMutations 辅助函数不是必须的，因为你可以直接使用 this.$store.commit('mutationName', payload) 来提交 mutation。但是，使用 mapMutations 可以让代码更加简洁，并且有助于遵循 Vuex 的最佳实践。
