Vuex 意外更新了 2 个状态对象

Question

我有一份公司名单。当用户点击列表项时，这家公司在商店中被设置为"selectedCompany"，并显示单项视图。为了允许用户编辑不同的部分，他可以切换到编辑模式。发生这种情况时，selectedCompany 被复制到另一个状态变量："companyToUpdate"

我的预期行为是让用户编辑克隆的版本，以便在他取消的情况下，克隆的版本被销毁并且底层的实际版本不被触及。如果他继续将编辑发送到服务器，响应将替换当前的 "selectedCompany".

我遇到的问题是，每当我更改克隆版本时，原始版本也会在不应该更改的情况下更改。

这是我的代码，但也许还有更好的方法...

vuex 存储模块：

const state = {
    selectedCompany: {},  
    companyToUpdate: false,
    editMode: false,
}

const actions = {

setEditMode: ({ commit, dispatch }, payload) => {  
        dispatch('singleCompany/cloneSelectedCompany', payload, { root: true } )
        commit('setEditMode', payload); 
    },


cloneSelectedCompany: ({ commit, state }, payload) => {
        if (payload) { let clone = state.selectedCompany; commit('cloneSelectedCompany', clone);  }
        if (!payload) {  commit('cloneSelectedCompany', payload);   }
    },

updateCompanyLocally: ({ commit }, payload) => { commit('updateCompanyLocally', payload); },
}

const mutations = {
 setEditMode: (state,payload) => { state.editMode = payload },

cloneSelectedCompany: (state,payload) => { state.companyToUpdate = payload },

updateCompanyLocally: (state,payload) => { 
        state.companyToUpdate[payload.fieldName] = payload.input
     },
}

None 我的突变更新了 selectedCompany 状态，但它确实发生了变化。 PS 我也在使用 vuex-persistedstate...可能在某些方面与它混淆

Answer 1

问题源于JS本身，因为对象是通过引用传递的，而不是通过值传递的，所以Vuex会指向内存中的同一个对象。

要基于现有对象创建新对象，您可以在 cloneSelectedCompany 突变中使用 hacky parse 和 stringify：

let clone = state.selectedCompany;

应该是

let clone = JSON.parse(JSON.stringify(state.selectedCompany));

根据您的用例，您也可能需要 deep clone 您的对象。

Vuex 意外更新了 2 个状态对象

Vuex unexpectedly updates 2 state objects

vue.js

vuex

vuex-modules