Vue.set 更新 vuex 存储中复制的对象

Question

当我 select 编辑对象时，vuex 存储会创建对象的工作副本，以便重置为初始对象状态。

初始加载突变看起来像这样（当我 select tablegrid 中的一个对象时）：

@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 方法应该如何工作的信息。

此致，

芬恩

Answer 1

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

Set > Update > Reset -- At this point any future Update will affect both objects

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

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

Vue.set 更新 vuex 存储中复制的对象

Vue.set updates copied objects in vuex store

javascript

state-management

typescript

vue.js

vuex