本篇内容介绍了“Pinia状态持久化问题怎么解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
在vue3中，常用Pinia代替Vuex来进行状态管理。
其他过程就省略了，今天在vue3中实现一个最简单的Pinia持久化插件,后续可能会进一步封装
计算
安全
数据库
网络和加速
企业服务
// FilePath < @/main.ts >
import { createApp, toRaw } from 'vue'
import App from './App.vue'
// 引入pinia
import { createPinia, PiniaPluginContext } from "pinia";
const app = createApp(App)
type Options = {
key?: string
}
// 默认的key
const __piniaKey__: string = 'Ocean'
// 负责存储的函数
const setStorage = (key: string, value: any) => {
// 将对象转字符串后存入 localStorage
localStorage.setItem(key, JSON.stringify(value))
}
// 负责取值的函数
const getStorage = (key: string) => {
// 根据key拿到localStorage中对应的值
return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {}
}
// Pinia持久化插件
const piniaPlugin = (options: Options) => {
return (context: PiniaPluginContext) => {
const { store } = context
const data = getStorage(`${options?.key ?? __piniaKey__}-${store.$id}`)
console.log(data);
store.$subscribe(() => {
// store.$state是一个 proxy 对象 要通过 toRaw() 转换成 原始对象
setStorage(`${options?.key ?? __piniaKey__}-${store.$id}`,toRaw(store.$state))
})
return {
...data
}
}
}
// 创建一个Pinia实例
const store = createPinia()
// 注册插件
store.use(piniaPlugin({
key: 'pinia'
}))
app.use(store)
app.mount('#app')1.下载插件pinia-plugin-persist
2.store下的index.js
import { createPinia } from 'pinia'
//pinia 持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store在写的store.js文件下增加配置项 默认为sessionStorage
persist: {
enabled: true,
strategies: [
{
key: 'user',
storage: localStorage,
path:[] //可以选择保存的字段 其余的不保存
}
]
}“Pinia状态持久化问题怎么解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/qq_51368103/article/details/126003475
