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 的最佳实践。