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 来改变状态：

 
  

在这个例子中，我们创建了一个简单的计数器应用。Vuex Store 包含一个状态 count 和三个方法：increment、decrement 和 setCount。Vue 组件通过 mapState 辅助函数将 count 状态映射到局部计算属性，并通过 mapMutations 辅助函数将突变方法映射到局部方法。这样，在组件的模板中，我们就可以通过绑定这些方法到按钮的点击事件来改变状态了。

注意：在 Vuex 4 中，mapMutations 辅助函数不是必须的，因为你可以直接使用 this.$store.commit('mutationName', payload) 来提交 mutation。但是，使用 mapMutations 可以让代码更加简洁，并且有助于遵循 Vuex 的最佳实践。