Pinia 实例清理方法？

Question

pinia实例 如何清理，持久层设置的是localstorage，localstorage.removeItem 清空key之后 pinia实例里面还是有，如何清理pinia实例里面的

export const useOpenXLibrary = defineStore({
    id: 'useOpenXLibrary', // 
    state: () => {
        return {
            OpenXLibrary: {}
        };
    },
    getters: {
        getOpenXLibrary(): Object {
            return this.OpenXLibrary;
        }
    },
    actions: {
        updateOpenXLibrary(OpenXLibrary: Object) {
            this.OpenXLibrary = OpenXLibrary;
        },
        clearOpenXLibraryStore() {
            this.OpenXLibrary = {};
        }
    },
    persist: true
});


// 这是清空localStorage
function clearLocalStorage() {
    const keys = ['useToken', 'useOpenXIdAdd', 'useOpenXLibrary'];

    for (let i = localStorage.length - 1; i >= 0; i--) {
        const key = localStorage.key(i) as string;

        if (!keys.includes(key)) {
            localStorage.removeItem(key);
        }
    }


    ElMessage.success('????');
    router.push({ path: '/' });
}


我是意思想所有的store里面 里面的数据全部clear  如 state里的 OpenXLibrary: {}、ids: [] 

Answer 1

不是直接调用 localstorage.removeItem() 来手动删除 localstorage 中的值。而是改写你的 clearOpenXLibraryStore 方法，清空 Pinia 的值的同时去同步删除 localstorage 中对应的内容：

actions: {
  updateOpenXLibrary(OpenXLibrary: Object) {
    this.OpenXLibrary = OpenXLibrary;
+    localstorage.setItem('yourLsKey', OpenXLibrary)
  },
  clearOpenXLibraryStore() {
    this.OpenXLibrary = {};
+    localstorage.removeItem('yourLsKey')
  }
}

没有用到 vue-use 库，如果你用了 useStorage 会更简单一些。

Answer 2

1.ls清空之后，也可以reload下，让pinia重新获取ls的内容。就覆盖了之前的数据，解决办法的一种。

2.或者调用各个模块的$reset函数

Answer 3

应该是通过修改 pinia 里的数据，然后同步到 ls 比较好，可以试试 pinia 插件来同步，通过 pinia 的 自己写或者用现成的库。
插件用的 pinia 自带的 ＄subscribe 来做。
这样用 ＄reset 可以直接重置 pinia 为初始状态，就可以同步清空 ls ，而无须自己读写 ls 。