Pinia 实例清理方法?

作者站长头像
站长
· 阅读数 31

pinia实例 如何清理,持久层设置的是localstoragelocalstorage.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: [] 
回复
1个回答
avatar
test
2024-06-19

不是直接调用 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 会更简单一些。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容