Vuex неожиданно обновляет 2 объекта состояния - PullRequest
Новая
       10

Vuex неожиданно обновляет 2 объекта состояния

0 голосов
/ 20 ноября 2018

У меня есть список компаний.Когда пользователь нажимает на элемент списка, эта компания устанавливается в магазине как «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
     },
}

Ни одна из моих мутацийобновить состояние выбранной компании, и все же оно меняется.PS Я также использую vuex-persistedstate ... может быть, это каким-то образом портит

1 Ответ

0 голосов
/ 20 ноября 2018

Проблема возникает из самого JS, поскольку объекты передаются по ссылке, а не по значению, поэтому Vuex будет указывать на тот же объект в памяти.

Чтобы создать новый объект на основе существующего объекта, выможет использовать хаки parse и stringify внутри вашей cloneSelectedCompany мутации:

let clone = state.selectedCompany;

должно быть

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

В зависимости от вашего варианта использования может также потребоваться глубокое клонирование вашего объекта.

...