Pinia非响应式存储副本中数组仍保持响应性的问题解决

核心问题分析 #

你当前的拷贝逻辑里，虽然用JSON.parse(JSON.stringify)试图剥离响应性，但将副本存在数组中容易引发引用混淆，而且实际拷贝后的数组本应是非响应式的，大概率是存储结构和后续操作导致了意外的响应绑定。

修正方案 #

1. 调整存储结构并优化拷贝逻辑 #

将settingsCopy从数组改为对象（因为只需要存储一份自定义默认设置），同时确保拷贝出完全脱离响应式的普通对象：

import { defineStore } from "pinia";

// 原设置Store
export const useSettingsStore = defineStore('settingsStore', {
    state: () => ({
        settingA: 10,
        settingB: 'Name Only',
        settingC: [1,2,3]
    })
})

// 自定义默认设置副本Store
export const useCopyStore = defineStore('copyStore', {
    state: () => ({
        settingsCopy: null // 改为对象存储单份副本
    }),
    actions: {
        takeCopy() {
            const settingsStore = useSettingsStore();
            // JSON序列化+解析完成深拷贝，彻底剥离Pinia的响应式代理
            this.settingsCopy = JSON.parse(JSON.stringify(settingsStore.$state));
        },
        // 新增恢复自定义默认的方法
        restoreCustomDefault() {
            const settingsStore = useSettingsStore();
            if (!this.settingsCopy) return;
            // 用$patch批量更新原状态，避免逐个赋值的繁琐
            settingsStore.$patch({ ...this.settingsCopy });
        }
    }
})

2. 备选深拷贝方案（针对JSON无法序列化的场景） #

如果你的设置中包含Date、正则等JSON无法处理的类型，改用浏览器原生的structuredClone方法：

this.settingsCopy = structuredClone(settingsStore.$state);

为什么原方案数组仍有响应性？ #

• 你将副本存在数组中，后续若直接引用settingsCopy[0]并和原Store状态做赋值操作，可能意外建立了引用关系；
• Pinia的$state是响应式代理对象，但JSON序列化会将其转换为原始值，只要拷贝逻辑正确，数组本应是非响应式的，改为对象存储能从根源避免数组操作带来的混淆。

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