Pinia 商店的非反应性副本仍保持反应性

Question

我有一个 Pinia 商店，其操作可以保存另一个商店的状态。这允许用户创建自定义“默认”设置并返回到它们，而不是使用

$reset()

返回到系统设置的起始状态。

这适用于某些状态，但数组状态除外。当其他状态不是时，商店副本保持反应状态。

以下代码示例：

import { defineStore } from "pinia";

//My Settings store
export const useSettingsStore = defineStore('settingsStore,' {
    state: () => ({
        settingA: 10,
        settingB: 'Name Only',
        settingC: [1,2,3]
    })
})

export const useCopyStore = defineStore('copyStore,' {
    state: () => ({
        settingsCopy: []
    }),
    actions: {
        takeCopy() { //save a copy of current settings, as non-reactive
            this.settingsCopy = [];
            this.settingsCopy.push(JSON.parse(JSON.stringify(useSettingsStore().$state)))
        }
    }
})

settingsStore

中的设置已

v-model

到前端 UI。 当我使用 Vue devtools 检查副本时，

settingA

和

settingB

是非反应性的。当我使用前端更改值时，我可以看到

settingC

settingsCopy

和原始商店中的值发生变化。我怎样才能防止这种情况发生？

Answer 1

尝试使用 markRaw() https://vuejs.org/api/reactivity-advanced.html#markraw

state: () => ({ 
   settingsCopy: markRaw(...) 
})```