I'm facing an issue where I copy an object to two states using the spread operator, but when I make changes in one state, the other state is also affected.
My goal is to implement an edit operation for itemDetails, which contains multiple items fetched upon mounting. The index of the item being edited is passed as editItemIndex. After editing, the item should be replaced.
I attempted to create a duplicate of itemDetails for resetting purposes named oItemDetails, but even the items within oItemDetails are altered after editing.
Please share some suggestions on how to prevent copying by reference.
state: {
itemDetails: [],
oItemDetails: [],
editItem: [],
editItemIndex: null,
},
actions: {
async showItemsEditModal ({state, commit}, value) {
commit('setItemsModalStatus', true);
state.oItemDetails = await {...value};
state.itemDetails = await {...value};
},
async openEditItemModal ({state, commit}, data) {
state.editItem = await {...data.data}
state.editItemIndex = await data.item_index
},
async editItem ({state, commit}, data) {
state.itemDetails.items[state.editItemIndex] = await data
},
async resetItem ({state}) {
console.log(state.itemDetails, state.oItemDetails)
state.itemDetails = await {...state.oItemDetails}
}
}