编辑“︁Vuex Mutations”︁（章节）

= Vuex Mutations =

'''Vuex mutations''' 是 Vuex 状态管理库中用于修改状态的唯一方式。它们是同步函数，负责更改 Vuex store 中的状态数据。由于 Vuex 强调单向数据流和可预测的状态变更，mutations 提供了一种标准化的方法来跟踪状态变化。

== 介绍 ==
在 Vuex 中，状态（state）的修改必须通过提交（commit）一个 mutation 来完成，而不能直接修改 state。这种设计确保了状态变更的可追踪性，便于调试和维护。

Mutations 有以下特点：
* 必须是同步函数
* 通过 `store.commit` 方法触发
* 可以接收额外的参数（payload）
* 在开发工具中可被记录和回溯

== 基本语法 ==
一个简单的 mutation 定义如下：

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

触发这些 mutations：

<syntaxhighlight lang="javascript">
// 无参数调用
store.commit('increment')

// 带参数调用
store.commit('incrementBy', { amount: 10 })

// 对象风格提交
store.commit({
  type: 'incrementBy',
  amount: 10
})
</syntaxhighlight>

== Mutation 类型常量 ==
对于大型应用，建议使用常量来命名 mutation 类型：

<syntaxhighlight lang="javascript">
// mutation-types.js
export const INCREMENT = 'INCREMENT'
export const INCREMENT_BY = 'INCREMENT_BY'

// store.js
import { INCREMENT, INCREMENT_BY } from './mutation-types'

const store = new Vuex.Store({
  mutations: {
    [INCREMENT] (state) {
      state.count++
    },
    [INCREMENT_BY] (state, payload) {
      state.count += payload.amount
    }
  }
})
</syntaxhighlight>

== 响应式规则 ==
由于 Vuex 的状态是响应式的，需要遵循 Vue 的响应式规则：

1. 最好提前在 state 中初始化所有所需属性
2. 当需要添加新属性时，应该使用：
   * `Vue.set(obj, 'newProp', 123)` 或
   * 用新对象替换老对象：`state.obj = { ...state.obj, newProp: 123 }`

== 实际案例 ==
假设我们有一个购物车应用，以下是处理购物车的 mutations 示例：

<syntaxhighlight lang="javascript">
const store = new Vuex.Store({
  state: {
    cart: [],
    checkoutStatus: null
  },
  mutations: {
    ADD_TO_CART (state, product) {
      const record = state.cart.find(item => item.id === product.id)
      if (!record) {
        state.cart.push({
          id: product.id,
          quantity: 1,
          ...product
        })
      } else {
        record.quantity++
      }
    },
    REMOVE_FROM_CART (state, productId) {
      state.cart = state.cart.filter(item => item.id !== productId)
    },
    SET_CHECKOUT_STATUS (state, status) {
      state.checkoutStatus = status
    }
  }
})
</syntaxhighlight>

== 工作流程 ==
<mermaid>
sequenceDiagram
    participant Component
    participant Vuex Store
    Component->>Vuex Store: commit('mutationType', payload)
    Vuex Store->>Mutation: Execute mutation
    Mutation->>State: Modify state
    State-->>Component: Trigger reactive update
</mermaid>

== 最佳实践 ==
1. 保持 mutations 简单且专注于单一状态变更
2. 使用常量作为 mutation 类型名称
3. 考虑将大型应用中的 mutations 分模块组织
4. 在 mutations 中不执行异步操作（这是 actions 的职责）
5. 对于复杂的状态变更，可以考虑使用辅助函数生成 mutations

== 常见问题 ==
=== 为什么 mutations 必须是同步的？ ===
同步 mutations 确保了状态变更可以被开发工具准确追踪。每个 mutation 执行后，状态快照可以被记录下来，便于时间旅行调试。

=== 如何在组件中提交 mutations？ ===
组件中可以通过以下方式提交 mutations：
<syntaxhighlight lang="javascript">
// 方法1：直接使用 this.$store
methods: {
  increment() {
    this.$store.commit('increment')
  }
}

// 方法2：使用 mapMutations 辅助函数
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'increment', // 映射 this.increment() 为 this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
    })
  }
}
</syntaxhighlight>

== 数学表达 ==
在状态管理中，我们可以将 mutation 视为一个纯函数：
<math>
state_{t+1} = mutation(state_t, payload)
</math>
其中：
* <math>state_t</math> 是当前状态
* <math>payload</math> 是提交的额外数据
* <math>state_{t+1}</math> 是 mutation 应用后的新状态

== 总结 ==
Vuex mutations 是修改状态的唯一途径，它们提供了一种可预测的方式来管理应用状态的变化。通过强制使用 mutations 来修改状态，Vuex 确保了状态变更的可追踪性和可维护性，特别是在大型应用中。理解并正确使用 mutations 是掌握 Vuex 状态管理的关键一步。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vuex状态管理]]