pinia-plugin-persistedstate持久化插件的局限性出现的引用问题：pinia+pinia-plugin-persistedstate

问题描述：在使用pinia-plugin-persistedstate恢复数据时，数据恢复后以来该数据的计算属性失去响应式。

先来看一下初始化数据：

let pageDataArr = reactive([]);

const pageDataArrLastElement = computed(() => {
    return pageDataArr.value[pageDataArr.value.length - 1];
})

红色的数据依赖于蓝色的数据，初始化时建立响应式，页面中引用红色数据。

当在引用该数据的页面中进行刷新操作后：

        pinia+pinia-plugin-persistedstate恢复数据的回调：

        

        数据成功恢复了，但是页面中用到的getter的数据响应式的绑定失效了

        

经过多番查阅资料外加自己分析，原因应该是当在pinia挂载之后插件恢复数据，恢复前的pageDataArr与恢复后的pageDataArr不是一个变量，但是在pageDataArrLastElement中引用的数据是前一个pageDataArr。

这个问题卡了我一整天。

在我的苦思冥想一遍一遍调试中，终于解决了。

解决办法：

const pageDataCache = ref([]);
let pageDataArr = ref([]);
watch(pageDataArr,(newValue) => {
    pageDataCache.value = newValue;
})
/**
* @description: 在数据恢复时用于重新建立数据响应式
* @return {*}
*/    
function restoreDataRerefer() {
    pageDataArr.value = pageDataCache.value;
}

首先新建一个pageDataCache变量——调试的时候随便起的，用watch监听pageDataArr同步两个变量中的数据，使用persistedstate缓存的时候只缓存pageDataCache变量。

afterRestore: (ctx) => {
    ctx.store.restoreDataRerefer()
    console.log(`刚刚恢复完:`,ctx.store.$id);
}

在persistedstate恢复完成回调中调用提前写好的回调函数restoreDataRerefer将缓存的数据给pageDataArrLastElement变量所绑定的那个pageDataArr。

并且要把本来的pageDataArr变量的reactive改成ref，就能恢复响应式了，不然只用reactive没办法赋值恢复响应式。

好了，问题就解决了，这怎么刷新页面也不会丢失响应式了

======================2024.3.20编辑========================================

如果你能看到这里说明你肯定遇到了这个问题，但是呢我编辑要说的是，在后面无意中的一次尝试发现，上面的更改全部可以推翻了。在问题出现的时候reactive的pageDataArr直接改成ref的就好，缓存问题就迎刃而解了。至于原因我也没有太明白，大概是ref赋值还能保持响应式但是reactive不可以吧，当pinia暴露出一个ref的响应式对象时暴露出的只是他的value而不是整个响应式对象。直接改为ref就可以避免因为赋值导致的响应式问题丢失了。

注意问题：

我使用的是pinia的组合式api，在做持久化的时候查了很多资料，感觉关于这方面的资料比较少，写一下我在使用该插件时遇到的问题：

首先第一个：组合式API怎么配置该插件

export const useUserStore = defineStore("user",() => {
    const userInfo = ref();
    function setUsetInfo(value) {
        userInfo.value = value;
    }
    return {
        userInfo,
        setUserInfo,
    }
},{
    persist: true
})

这里是举个例子，当使用pinia的组合式API时，配置插件写在defineStore的第三个参数中，具体的配置信息参见文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

第二个问题：persistedstate插件只会存储在return中暴露出去的数据，如果数据没有暴露出去的话就算写在paths中也不会缓存，函数也是一样，我上面提到的回调函数和中转缓存数据都要写到return中暴露出去。

由于这个问题卡了我很久，并且在网上也没有找到相关的案例，所以特此记录一下，第一次写博客各位大佬海涵。

最后贴上大佬的文章：

Pinia刷新会丢失数据 应该怎么解决_pinia刷新页面数据丢失怎么解决-CSDN博客

pinia + pinia-plugin-persistedstate + 组合式API 写法，持久化失效问题-CSDN博客