仓库

更新: 2025/3/27 20:34:02 字数: 0 字

Pinia 持久化

主要是要想好何时进行读取何时进行存储。

index.js

import piniaPluginPersistedstate from "./persistPlugin.js"
const store = createPinia()
// 使用插件
store.use(piniaPluginPersistedstate)
export default store

persistPlugin.js

const PINIA_KEY = "pinia_store"
export default function(context){
    console.log(context);

    const {store} = context

    // 仓库 id 和固定 key 组成唯一的键
    const KEY = PINIA_KEY + store.$id;

    // 当浏览器窗口关闭或者刷新时，会触发 beforeunload 事件
    // 存储 
    window.addEventListener('beforeunload', () => {
        localStorage.setItem(KEY, JSON.stringify(store.$state));
    })

    // 读取
    try {
        const localData = localStorage.getItem(KEY);
        if(localData){
            // 解析将数据放回到仓库中
            store.$patch(JSON.parse(localData))
        }
    } catch{
        console.log("本地存储数据异常")
    }
}