持久化"/>
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 }
更多推荐
pinia数据持久化
发布评论