pinia数据持久化

持久化"/>

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，默认存储sessionStoragepaths: ['scrollInfo']   //指定要长久化的字段}]}
})
export { userScrollView }