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'],
},
这篇博客介绍了如何在Vue应用中利用pinia的状态管理库,结合pinia-plugin-persistedstate插件实现数据持久化。通过在main.ts中注册插件,然后在定义store时启用或指定需要持久化的状态,可以确保用户在刷新页面后仍能保留之前的状态。同时,还展示了如何配置存储方式、缓存key以及部分持久化状态的路径。
2122

被折叠的 条评论
为什么被折叠?



