Vue.set 更新 Vuex 存储中复制的对象答案

【问题标题】：Vue.set updates copied objects in vuex storeVue.set 更新 Vuex 存储中复制的对象
【发布时间】：2021-01-13 17:37:42
【问题描述】：

当我选择要编辑的对象时，vuex 存储会创建该对象的工作副本，以使重置为初始对象状态成为可能。

初始加载突变如下所示（当我在表格网格中选择一个对象时）：

@Mutation
  private [MutationTypes.LOAD_OBJECT_DETAILS_SUCCESS](object: ObjectDetailViewModel) {
Vue.set(this.State.detail, 'initalObject', object);
Vue.set(this.State.detail, 'workingCopyofObject', cloneDeep(object));
}

我正在使用 loadash CloneDeep 方法，但是当我使用普通 js 对象副本时遇到同样的失败，例如：JSON.parse(JSON.stringify(router)))。

现在，当我尝试更新对象的工作副本时，Vue.Set 方法也会更新我的初始对象。

  @Mutation
  private [MutationTypes.UPDATE_WORKINGCOPY_Object](updateProp: KeyValuePair) {

      Vue.set(this.State.detail.workingCopyofObject, updateProp.key, updateProp.value);

  }

所以当我调用我的重置突变时，我不会得到我的初始值：

 @Mutation
 private [RouterMutationTypes.DISCARD_WORKINGCOPY_CHANGES]() {
   Vue.set(this.State.detail, 'workingCopyofObject', this.State.detail.initalObject); // initialObject already contains the changes of the working copy
 }

也许我只是错过了一些关于 Vue.set 方法应该如何工作的内容。

最好的问候，

芬恩

【问题讨论】：

标签： javascript typescript vue.js vuex state-management

【解决方案1】：

问题在于您的重置突变。您将工作副本设置为初始对象，这违背了副本的目的。使用类似于以下程序流程的任何内容，您将看到您所看到的重复行为：

Set > Update > Reset -- 此时任何未来的更新都会影响这两个对象

一个简单的解决方法是在重置时克隆初始对象：

@Mutation
private [RouterMutationTypes.DISCARD_WORKINGCOPY_CHANGES]() {
   const clone = cloneDeep(this.State.detail.initalObject);
   Vue.set(this.State.detail, 'workingCopyofObject', clone);
}

【讨论】：