javascript之如何在 Vuex 中将同一个对象复制到两个变量而不相互改变

我想做的是使用扩展运算符将一个对象复制到两个状态，但是当我更改其中一个时，其他状态也会发生变化。

实际上，我正在为这个 itemDetails 实现一个编辑操作，它是在挂载时获取的，并且在一个数组中有多个项目。 editItemIndex 在该项目的编辑模式打开时传递。替换编辑项后。

我正在尝试复制 itemDetails 的副本以重置为 oItemDetails 但 oItemDetails 的项目是编辑后也发生了变化。

请给我一些避免引用复制的建议

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

请您参考如下方法:

您需要深度克隆以避免 copy reference对于深层对象，请使用 lodash clone deep 或 JSON.parse(JSON.stringify(value)) 代替 {...value}。

注意 JSON.parse 和 JSON.stringify 的性能不好，lodash clone deep是更好的解决方案。