pinia 解决页面刷新数据丢失的问题

和vuex一样，刷新页面state的值会丢失，或者说被重置。同样解决方案和vuex一样使用localStorage解决。但这次可以通过插件的方式解决。

    interface PiniaPluginContext 有四个值
    /**
     * pinia实例
     */
    pinia: Pinia;
    /**
     * 当前项目createApp(App)的实例
     */
    app: App;
    /**
     * 当前store仓库的实例
     */
    store: Store<Id, S, G, A>;
    /**
     * 定义仓库defineStore传入的options对象
     */
    options: DefineStoreOptionsInPlugin<Id, S, G, A>;

main.ts

    import { createApp, toRaw } from 'vue'
    import App from './App.vue'
    import { createPinia, PiniaPluginContext, PiniaPlugin } from 'pinia'
    
    const app = createApp(App)
    
    // 数据存储本地
    const setStorage = (key: string, value: any) => {
        localStorage.setItem(key, JSON.stringify(value))
    }
     // 获取本地数据
    const getStorage = (key: string) => {
        const data = localStorage.getItem(key)
        return data ? JSON.parse(data) : {};
    }

    const piniaPlugin = (context: PiniaPluginContext) => {
        const { store } = context;
        // $subscribe state值发生变化时会执行传入的回调
        store.$subscribe(() => {
            // 每次修改值的时候更新localStorage数据
            setStorage(`pinia-${store.$id}`, toRaw(store.$state))
        })
        // 每次构建项目的时候从本地存储取值
        const data = getStorage(`pinia-${store.$id}`)
        并将取的值赋给state
        return {
            ...data
        }
    }

    const store = createPinia()
    store.use(piniaPlugin)
    
    app.use(store)
    app.mount('#app')

这样就ok了,多个仓库就存多个localStorage