如果没有引用，无法复制Pinia状态数组

Question

我正试图在Pinia商店中创建一个数组的副本。此副本用于在不同组件中创建一个反应性对象，用于对输入进行建模。只有当用户想保存更改时，复制数组才应该用于覆盖原始数组。

然而，当复制数组被修改时，原始数组也会立即被修改，就好像它只是一个引用一样。

  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是一个深嵌套对象数组，所以我不能简单地执行数组映射函数并复制每个项的值。

Answer 1

创建深度嵌套对象副本的一种方法是使用

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

如果导入库是一个选项，lodash -cloneDeep可以通过lodash.cloneDeep模块单独导入。参见用法这里