Every time I choose an object to edit, the Vuex store generates a duplicate of the object so that reverting back to the original object state is possible.
The loading mutation in my code appears as follows (when selecting an object from a tablegrid):
@Mutation
private [MutationTypes.LOAD_OBJECT_DETAILS_SUCCESS](object: ObjectDetailViewModel) {
Vue.set(this.State.detail, 'initialObject', object);
Vue.set(this.State.detail, 'workingCopyofObject', cloneDeep(object));
}
I am utilizing the lodash CloneDeep Method for this purpose, but encountered similar issues when using plain JavaScript object copying like:
JSON.parse(JSON.stringify(router)))However, whenever I attempt to modify the working copy of the object, the Vue.Set Method also modifies my initial object.
@Mutation
private [MutationTypes.UPDATE_WORKINGCOPY_Object](updateProp: KeyValuePair) {
Vue.set(this.State.detail.workingCopyofObject, updateProp.key, updateProp.value);
}
This leads to a situation where invoking the reset mutation does not restore the initial values:
@Mutation
private [RouterMutationTypes.DISCARD_WORKINGCOPY_CHANGES]() {
Vue.set(this.State.detail, 'workingCopyofObject', this.State.detail.initialObject); // initialObject already reflects changes from the working copy
}
It seems like there might be something fundamental about how the Vue.Set Method functions that I may have overlooked.
Sincerely,
Finn