無法復制 Pinia state 數組而不引用它

Question

我正在嘗試在 Pinia 商店中創建數組的副本。 此副本用於在用於 model 輸入的不同組件中創建反應式 object。 只有當用戶想要保存更改時，才應該使用復制數組來覆蓋原始數組。

但是，只要復制數組被修改，原始數組也會立即被修改，就好像它只是一個引用一樣

  import { defineStore } from 'pinia'

  export const useItemStore = defineStore('item', {
      state: () => ({
        items: ['foo', 'bar'],
        itemView: []
    }),

    actions: {
    initialize(){
        this.itemView = [...this.items] //create a copy of original items array
   },
    edit(newItems){
        this.itemView = newItems
    },
    save(){
        this.items= [...this.itemView ] //save the changes
    },
})

如何創建可在不更新原始文件的情況下進行編輯的 Pinia 數組的副本？

在我的實際用例中， items是一個深層嵌套對象的數組，所以我不能簡單地做一個數組 map function 並復制每個項目的值

Answer 1

創建深度嵌套的 object 副本的一種方法是使用

const copy = JSON.parse(JSON.stringify(items));

如果可以選擇導入庫，則可以通過lodash.cloneDeep模塊單獨導入lodash - cloneDeep 。 看這里的用法