使用 vuex 存储更新现有数据对象

Question

我进行了搜索 google 并进行了所有可能的问答，但我不知道该怎么做。

我有一个 vueX 存储操作，可以从一个组件更新用户数据（工作正常！）

但是，我想通过向对象添加另一个键和值来更新同一个用户数据对象，而不是覆盖当前状态。

突变：

const mutations = {
    updateUser(state, user) {
        console.log("Mutation User:", user);
        state.userToSave = user
    }
}

操作：

const actions = {
    updateCurrentUser({ commit }, user) {
        commit('updateUser', user)
        console.log("User: \n", user)
    },

我第一次调用调度程序从注册表单更新用户数据对象（工作正常！我得到了我需要的所有数据）：

submitForm(){
  this.$store.dispatch({
    type: "updateCurrentUser",
    user: this.userObject
  })

我第二次调用调度以向对象添加特定键:(覆盖现有数据并仅将其替换为 this.designID 值

afterPick(){
  this.closeModalDesign = false;
  this.$store.dispatch({
    type: "updateCurrentUser",
    user: this.designID
  })
  this.paymentInit = true;
},

有什么建议吗？我也想收到一个简短的解释，这将帮助我更好地理解所有 vuex 的东西

Answer 1

看起来您正在更新整个用户对象，而不是仅仅覆盖用户的“designID”。要仅覆盖用户的 designID，您需要创建一个新的 vuex 突变：

updateUserDesignID: (state, designID) => {
  state.user.designID = designID
}

然后从您的组件调用：

this.$store.dispatch({
  type: "updateUserDesignID",
  designID: this.designID
})

使用 vuex 存储更新现有数据对象

Updating existing data object using vuex store

vue.js

vuex

vuejs2