Question

我的Nuxt store / index.js文件中包含以下数据：

export const state = () => ({
    user: {
        status: 'signedin',
        data: {
            'salutation': 'Mr',
            'firstname': 'Test',
            'lastname': 'Person',
            'emailaddress': 'test@test.com'
        }
    }
});

我想更新“数据”部分中的某些值，而不是其他值...例如我想将“名字”更改为“大卫”，但其余数据保持不变。请有人能指出正确的方向吗？

Answer 1

您应该可以使用mutation来执行此操作。您可以在此处找到更新子属性的示例：CodePen

在您的情况下，您的突变看起来像这样：

{
...
  mutations: {
    UPDATE_FIRST_NAME(state, value) {
      state.user.data.firstname = value;
    }
  }
...
}
// Call the mutation
this.$store.commit('UPDATE_FIRST_NAME', 'David')

Answer 2

我相信我已经解决了。我的变异看起来像这样：

{
...
  mutations: {
    UPDATE_USER_DATA(state, value)
    {
        for(const value in values)
        {
            state.user.data[value] = values[value];
        }
    }
  }
...
}

然后我可以使用以下内容更新某些数据：

this.$store.commit('UPDATE_USER_DATA', {'firstname': 'New'});

这会将“ firstname”更新为“ New”，但其余数据保持原样。

我还可以动态更新数据，例如，如果我有一个子组件正在使用该突变基于道具在我的“数据”中设置一个字段。例如。如果我的道具“字段”设置为“名字”，则可以使用以下命令将其传递给我的突变：

this.$store.commit('UPDATE_USER_DATA', {this.field: 'New'});

这还将把“名字”更新为“新建”，但其余数据保持原样。

更新Vuex存储中的数据，而不是替换它

2 个答案: