pinia数据持久化

1、安装pinia-plugin-persist

npm i pinia-plugin-persist --save

2、main.ts中挂在(只是事例，可以考虑把pinia单独抽出来)

import { createSSRApp } from "vue";
import App from "./App.vue";
import router from "./config/router";
import "@/assets/font/iconfont.css";
import piniaPluginPersist from 'pinia-plugin-persist';
import { createPinia } from "pinia";
export function createApp() {
    const app = createSSRApp(App);
    const pinia = createPinia();
    pinia.use(piniaPluginPersist);
    app.use(router);
    app.use(pinia);
    return {
        app
    };
}

3、使用

import { defineStore } from 'pinia';
const userScrollView = defineStore('scrollView', () => {
    const scrollTop = ref(0);
    const scrollInfo = ref(0);
    const setScrollInfo = (scroll: number) => {
        scrollInfo.value = scroll;
    }
    const setScrollTop = (scroll: number) => {
        scrollTop.value = scroll;
    }

    return { scrollTop, setScrollTop, scrollInfo, setScrollInfo }
}, {
    persist: {
        enabled: true,  //开启数据缓存
        strategies: [
            {
                key: '234242',//设置存储的key,默认为 scrollView,可以不指定
                storage: localStorage,//表示存储在localStorage，默认存储sessionStorage
                paths: ['scrollInfo']   //指定要长久化的字段
            }
        ]
    }
})
export { userScrollView }