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
     },
}

我的任何突变都不会更新selectedCompany状态，但确实会发生变化。 PS我也正在使用vuex-persistedstate ...也许以某种方式使其混乱

Answer 1

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

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

let clone = state.selectedCompany;

应该是

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

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

Vuex意外更新2个状态对象

1 个答案: