Vuex Mutations

在 Vuex 中，mutations 是唯一允许修改 Vuex 状态（state）的方式。它们是同步函数，用于直接修改 state 中的数据。理解 mutations 的工作原理对于掌握 Vuex 状态管理至关重要。

什么是 Mutations？

Mutations 是 Vuex 中的一种特殊函数，用于修改 state 中的数据。每个 mutation 都有一个字符串类型的 事件类型（type） 和一个 回调函数（handler）。回调函数接收 state 作为第一个参数，并可以接收额外的参数（称为 payload）来修改 state。

备注

Mutations 必须是同步的。如果需要异步操作，应该使用 actions。

定义 Mutations

在 Vuex store 中，mutations 是通过 mutations 选项定义的。以下是一个简单的示例：

javascript
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    incrementBy(state, payload) {
      state.count += payload.amount
    }
  }
})

在上面的代码中，我们定义了两个 mutations：

increment：将 state.count 增加 1。
incrementBy：将 state.count 增加 payload.amount。

提交 Mutations

要触发一个 mutation，你需要使用 store.commit 方法。以下是如何提交上述 mutations 的示例：

javascript
// 提交 increment mutation
store.commit('increment')

// 提交 incrementBy mutation，并传递 payload
store.commit('incrementBy', { amount: 10 })

提交后，state.count 的值将根据 mutation 的逻辑进行更新。

实际案例

假设我们正在开发一个简单的计数器应用，用户可以通过点击按钮来增加计数器的值。以下是完整的代码示例：

javascript
// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    incrementBy(state, payload) {
      state.count += payload.amount
    }
  }
})

// App.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementBy(10)">Increment by 10</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    incrementBy(amount) {
      this.$store.commit('incrementBy', { amount })
    }
  }
}
</script>

在这个案例中，用户点击按钮时，会触发相应的 mutation，从而更新 state.count 的值。

Mutations 的注意事项

同步性：Mutations 必须是同步的。如果需要异步操作，应该使用 actions。
命名规范：建议使用常量来命名 mutations，以避免拼写错误。
单一职责：每个 mutation 应该只负责修改 state 中的一个特定部分。

总结

Mutations 是 Vuex 中用于修改 state 的核心机制。通过定义和提交 mutations，你可以确保 state 的修改是可追踪和可预测的。记住，mutations 必须是同步的，如果需要异步操作，应该使用 actions。

附加资源

练习

尝试在现有的 Vuex store 中添加一个新的 mutation，用于减少 state.count 的值。
创建一个新的 Vuex store，包含一个 user 对象，并定义 mutations 来更新用户的姓名和年龄。

通过实践这些练习，你将更深入地理解 mutations 的工作原理。

什么是 Mutations？​

定义 Mutations​

提交 Mutations​

实际案例​

Mutations 的注意事项​

总结​

附加资源​

练习​