提交风格 #

两种提交风格 #

Vuex 提供了两种提交 mutation 的方式：

普通提交：直接传递类型和载荷
对象风格提交：使用包含 type 属性的对象

普通提交 #

基本用法 #

javascript

// 无参数
this.$store.commit('INCREMENT')

// 带参数
this.$store.commit('SET_COUNT', 10)

// 带对象参数
this.$store.commit('SET_USER', {
  name: 'John',
  age: 25
})

Mutation 定义 #

javascript

mutations: {
  INCREMENT(state) {
    state.count++
  },
  
  SET_COUNT(state, value) {
    state.count = value
  },
  
  SET_USER(state, user) {
    state.user = user
  }
}

对象风格提交 #

基本用法 #

javascript

this.$store.commit({
  type: 'SET_COUNT',
  value: 10
})

this.$store.commit({
  type: 'SET_USER',
  user: {
    name: 'John',
    age: 25
  }
})

Mutation 定义 #

javascript

mutations: {
  SET_COUNT(state, payload) {
    state.count = payload.value
  },
  
  SET_USER(state, payload) {
    state.user = payload.user
  }
}

两种风格对比 #

普通提交 #

javascript

// 提交
this.$store.commit('SET_COUNT', 10)

// Mutation
mutations: {
  SET_COUNT(state, value) {
    state.count = value  // 直接使用 value
  }
}

对象风格提交 #

javascript

// 提交
this.$store.commit({
  type: 'SET_COUNT',
  value: 10
})

// Mutation
mutations: {
  SET_COUNT(state, payload) {
    state.count = payload.value  // 从 payload 中取值
  }
}

使用场景 #

场景一：简单值 #

javascript

// 推荐：普通提交
this.$store.commit('SET_COUNT', 10)
this.$store.commit('SET_LOADING', true)
this.$store.commit('SET_THEME', 'dark')

场景二：多参数 #

javascript

// 推荐：对象风格提交
this.$store.commit({
  type: 'UPDATE_USER',
  name: 'John',
  age: 25,
  email: 'john@example.com'
})

// 或普通提交配合对象
this.$store.commit('UPDATE_USER', {
  name: 'John',
  age: 25,
  email: 'john@example.com'
})

场景三：表单数据 #

javascript

// 对象风格提交更清晰
this.$store.commit({
  type: 'UPDATE_FORM',
  formData: {
    username: this.username,
    password: this.password,
    remember: this.remember
  }
})

统一处理 #

兼容两种风格 #

javascript

mutations: {
  SET_COUNT(state, payload) {
    // 兼容两种提交方式
    const value = typeof payload === 'object' ? payload.value : payload
    state.count = value
  }
}

// 两种方式都可以
this.$store.commit('SET_COUNT', 10)
this.$store.commit({ type: 'SET_COUNT', value: 10 })

使用解构 #

javascript

mutations: {
  UPDATE_USER(state, { name, age, email }) {
    // 普通提交需要传递对象
    // this.$store.commit('UPDATE_USER', { name, age, email })
    state.user = { name, age, email }
  }
}

在 Action 中提交 #

普通提交 #

javascript

actions: {
  async fetchUser({ commit }, userId) {
    const user = await fetchUser(userId)
    commit('SET_USER', user)
  }
}

对象风格提交 #

javascript

actions: {
  async fetchUser({ commit }, userId) {
    const user = await fetchUser(userId)
    commit({
      type: 'SET_USER',
      user
    })
  }
}

最佳实践 #

1. 保持一致性 #

javascript

// 推荐：项目中统一使用一种风格

// 风格一：普通提交
commit('SET_COUNT', 10)
commit('SET_USER', { name: 'John' })

// 风格二：对象风格
commit({ type: 'SET_COUNT', value: 10 })
commit({ type: 'SET_USER', user: { name: 'John' } })

2. 命名清晰 #

javascript

// 推荐：清晰的参数名
this.$store.commit({
  type: 'UPDATE_USER_PROFILE',
  profile: userData
})

// 不推荐：模糊的参数名
this.$store.commit({
  type: 'UPDATE_USER',
  data: userData
})

3. 类型安全 #

javascript

// 使用常量
import { SET_COUNT, SET_USER } from './mutation-types'

this.$store.commit(SET_COUNT, 10)
this.$store.commit({
  type: SET_USER,
  user: userData
})

总结 #

两种提交风格对比：

特性	普通提交	对象风格提交
语法	`commit(type, payload)`	`commit({ type, ...payload })`
参数访问	直接使用 payload	`payload.property`
适用场景	简单值、单参数	多参数、复杂对象
可读性	简洁	更明确

继续学习 mapMutations辅助函数，简化 Mutation 映射。