0

我有一份公司名单。当用户单击一个列表项时，该公司在商店中设置为“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 ...也许会以某种方式弄乱它

4

1 回答 1

2

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

要基于现有对象创建新对象，您可以使用 hackyparse并stringify在您的cloneSelectedCompany变异内部：

let clone = state.selectedCompany;

应该

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

根据您的用例，您还可能需要深度克隆您的对象。

于 2018-11-20T18:46:10.610 回答