Pinia状态持久化问题怎么解决

本篇内容介绍了“Pinia状态持久化问题怎么解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

Pinia状态持久化

在vue3中，常用Pinia代替Vuex来进行状态管理。

其他过程就省略了，今天在vue3中实现一个最简单的Pinia持久化插件,后续可能会进一步封装

//   FilePath <  @/main.ts >import { createApp, toRaw } from 'vue'import App from './App.vue'//引入piniaimport { createPinia, PiniaPluginContext } from "pinia";const app = createApp(App)type Options = {    key?: string}//默认的keyconst __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')

Pinia数据持久化处理

下载插件pinia-plugin-persist

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状态持久化问题怎么解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！