Vuex 核心概念：Mutations 详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00267/article/details/148360576

Vuex 核心概念：Mutations 详解

vuex vuejs/vuex: 是一个基于 Vue.js 的状态管理库，支持多种前端状态管理选项。该项目提供了一个简单易用的状态管理库，可以方便地实现前端应用程序的状态管理，同时支持多种前端状态管理选项。项目地址: https://gitcode.com/gh_mirrors/vu/vuex

什么是 Mutations

在 Vuex 状态管理库中，Mutations 是唯一允许修改状态(state)的方式。你可以把 Mutations 想象成事件系统：每个 mutation 都有一个字符串类型的标识(type)和一个处理函数(handler)。这个处理函数接收 state 作为第一个参数，在函数体内执行实际的状态修改。

基本用法

让我们从一个简单的计数器示例开始：

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

要触发这个 mutation，你需要调用 commit 方法：

store.commit('increment')

带参数的 Mutations

在实际开发中，我们经常需要传递额外的参数给 mutation。这被称为 payload（载荷）：

mutations: {
  incrementBy(state, n) {
    state.count += n
  }
}

调用时传递参数：

store.commit('incrementBy', 10)

为了更好的可读性和扩展性，建议将 payload 设置为对象形式：

mutations: {
  incrementBy(state, payload) {
    state.count += payload.amount
  }
}

store.commit('incrementBy', {
  amount: 10
})

对象风格的提交方式

Vuex 还支持对象风格的提交方式，这种方式下整个对象都会作为 payload 传给 mutation 函数：

store.commit({
  type: 'incrementBy',
  amount: 10
})

对应的 mutation 处理函数保持不变：

mutations: {
  incrementBy(state, payload) {
    state.count += payload.amount
  }
}

使用常量命名 Mutation 类型

在大型项目中，建议使用常量来命名 mutation 类型。这样做有几个好处：

避免拼写错误
便于工具（如 linter）检查
让团队成员一目了然地了解所有可能的 mutation

// mutation-types.js
export const INCREMENT = 'INCREMENT'

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

const store = createStore({
  state: { ... },
  mutations: {
    [INCREMENT](state) {
      // 修改状态
    }
  }
})

Mutations 必须是同步的

这是 Vuex 中一个非常重要的规则。Mutation 处理函数必须是同步的，这是因为：

调试工具依赖同步性：Vue DevTools 需要捕捉每个 mutation 前后的状态快照
状态可预测性：异步操作会使状态变化难以追踪和理解

错误的异步 mutation 示例：

mutations: {
  someMutation(state) {
    // 错误！这里包含异步操作
    setTimeout(() => {
      state.count++
    }, 1000)
  }
}

如果需要异步操作，应该使用 Actions（我们将在后续文章中介绍）。

在组件中提交 Mutations

在 Vue 组件中，你有几种方式可以提交 mutations：

直接使用 this.$store.commit

methods: {
  increment() {
    this.$store.commit('increment')
  }
}

使用 mapMutations 辅助函数

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      'incrementBy' // 支持 payload
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}