如何创建Pinia状态数组的独立副本，修改时不影响原数组？

问题描述 #

我尝试在Pinia store中创建数组副本，用于在组件中绑定输入做响应式编辑，仅在用户触发保存时才用副本覆盖原数组。但目前修改副本时原数组会同步变化，显然二者只是引用关系。

我的代码如下：

import { defineStore } from 'pinia'

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

    actions: {
        initialize(){
            this.itemView = [...this.items] // 创建原数组的副本
        },
        edit(newItems){
            this.itemView = newItems
        },
        save(){
            this.items= [...this.itemView ] // 保存更改
        },
    }
})

实际场景中items是深层嵌套对象的数组，无法通过简单的map函数复制每个项的值。请问如何创建可编辑且不会同步修改原数组的Pinia数组副本？

解决方案 #

问题核心在于：你当前用的扩展运算符...是浅拷贝，只会复制数组本身的引用，数组内的嵌套对象仍然和原数组共享内存地址，所以修改副本里的对象属性会直接影响原数组。必须使用深拷贝来彻底切断引用关系。

以下是几种适用于Pinia场景的深拷贝方案：

1. 使用原生API structuredClone #

这是最简单的方案，原生支持大部分JavaScript数据类型（包括嵌套对象、Date、RegExp等），无需额外依赖：

import { defineStore } from 'pinia'

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

    actions: {
        initialize(){
            this.itemView = structuredClone(this.items); // 深拷贝原数组
        },
        edit(newItems){
            this.itemView = newItems
        },
        save(){
            this.items= [...this.itemView ]
        },
    }
})

注意：structuredClone不支持函数、Symbol、DOM节点等特殊类型，如果你的数组包含这些类型，需要改用其他方案。

2. 自定义递归深拷贝函数 #

如果需要处理structuredClone不支持的类型，或者有特殊的拷贝逻辑，可以自己实现递归深拷贝：

// 自定义深拷贝函数
function deepClone(obj) {
    // 非对象类型直接返回
    if (obj === null || typeof obj !== 'object') return obj;
    // 处理Date对象
    if (obj instanceof Date) return new Date(obj.getTime());
    // 处理数组
    if (obj instanceof Array) return obj.map(item => deepClone(item));
    // 处理普通对象
    const clonedObj = {};
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            clonedObj[key] = deepClone(obj[key]);
        }
    }
    return clonedObj;
}

import { defineStore } from 'pinia'

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

    actions: {
        initialize(){
            this.itemView = deepClone(this.items); // 使用自定义深拷贝
        },
        edit(newItems){
            this.itemView = newItems
        },
        save(){
            this.items= [...this.itemView ]
        },
    }
})

3. 组件内局部深拷贝优化 #

如果数组规模较大，全量深拷贝性能开销高，可以在组件中仅对当前编辑的对象做深拷贝，再更新到副本数组：

// 组件中代码示例
import { storeToRefs } from 'pinia';
import { useItemStore } from './itemStore';

const store = useItemStore();
const { itemView } = storeToRefs(store);

// 编辑指定索引的对象
const editItem = (index, updatedFields) => {
    // 先深拷贝整个副本数组
    const clonedItems = structuredClone(itemView.value);
    // 合并更新字段到目标对象
    clonedItems[index] = { ...clonedItems[index], ...updatedFields };
    // 调用store的edit方法更新副本
    store.edit(clonedItems);
};

注意事项 #

• 深拷贝会带来一定性能开销，若数组或嵌套结构极大，建议结合业务做局部拷贝优化。
• 保存时的save方法无需额外深拷贝，因为itemView已经是独立的深拷贝数组，用扩展运算符...复制数组结构即可。

内容的提问来源于stack exchange，提问作者user3629023