vue commit 方法实现

Vue 中 commit 方法的实现

在 Vue 中，commit 方法是 Vuex 的核心方法之一，用于提交 mutation 来修改状态。以下是实现 commit 方法的关键步骤：

基本用法

store.commit('mutationName', payload)

mutationName 是 mutations 中定义的方法名，payload 是可选的参数，可以是任意类型。

实现原理

Vuex 的 commit 方法主要做了以下几件事：

1. 查找对应的 mutation
2. 执行 mutation 函数
3. 触发订阅者

核心代码实现

class Store {
  constructor(options) {
    this._mutations = options.mutations || {}
  }

  commit(type, payload) {
    const entry = this._mutations[type]
    if (!entry) {
      console.error(`[vuex] unknown mutation type: ${type}`)
      return
    }

    entry(this.state, payload)

    // 通知所有订阅者
    this._subscribers.forEach(sub => sub({type, payload}, this.state))
  }
}

带命名空间的 commit

当使用模块时，commit 会自动根据命名空间调整路径：

commit('moduleName/mutationName', payload)

对象风格的 commit

commit 也支持对象风格：

store.commit({
  type: 'mutationName',
  payload: value
})

源码中的实现

Vuex 源码中实际的 commit 实现更复杂，包含：

• 开发环境警告
• 严格模式检查
• 性能追踪
• 插件系统支持

最佳实践

1. Mutation 必须是同步函数
2. 使用常量作为 Mutation 类型
3. 在组件中可以使用 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')
    })
  }
}