这篇博客介绍了如何在Vue应用中利用pinia的状态管理库，结合pinia-plugin-persistedstate插件实现数据持久化。通过在main.ts中注册插件，然后在定义store时启用或指定需要持久化的状态，可以确保用户在刷新页面后仍能保留之前的状态。同时，还展示了如何配置存储方式、缓存key以及部分持久化状态的路径。
1.npm i pinia-plugin-persistedstate
2.在main.ts中注册
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate);
app.use(pinia)
3.模块开启数据持久化
const useHomeStore = defineStore("home",{
// 开启数据持久化
persist: true
// ...省略
});
此外，若不想全部持久化可以指定需要持久化的数据
persist:{
key: 'article', //缓存key
storage: window.sessionStorage, //缓存方式
// 部分持久化状态的点符号路径数组，默认持久化所有数据
paths: ['baseConfig','globalSrc','relationConfig'],
},
1005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
