Pinia狀態(tài)持久化問(wèn)題怎么解決

本篇內(nèi)容介紹了“Pinia狀態(tài)持久化問(wèn)題怎么解決”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Pinia狀態(tài)持久化

在vue3中，常用Pinia代替Vuex來(lái)進(jìn)行狀態(tài)管理。

其他過(guò)程就省略了，今天在vue3中實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的Pinia持久化插件,后續(xù)可能會(huì)進(jìn)一步封裝

//   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
}
//	默認(rèn)的key
const __piniaKey__: string = 'Ocean'
//	負(fù)責(zé)存儲(chǔ)的函數(shù)
const setStorage = (key: string, value: any) => {
    //	將對(duì)象轉(zhuǎn)字符串后存入 localStorage
    localStorage.setItem(key, JSON.stringify(value))
}
//	負(fù)責(zé)取值的函數(shù)
const getStorage = (key: string) => {
    //	根據(jù)key拿到localStorage中對(duì)應(yīng)的值
    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是一個(gè) proxy 對(duì)象 要通過(guò) toRaw() 轉(zhuǎn)換成 原始對(duì)象
            setStorage(`${options?.key ?? __piniaKey__}-${store.$id}`,toRaw(store.$state))
        })
        return {
            ...data
        }
    }
}
//	創(chuàng)建一個(gè)Pinia實(shí)例
const store = createPinia()
//	注冊(cè)插件
store.use(piniaPlugin({
    key: 'pinia'
}))

app.use(store)
app.mount('#app')

Pinia數(shù)據(jù)持久化處理

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

在寫(xiě)的store.js文件下增加配置項(xiàng) 默認(rèn)為sessionStorage

  persist: {
        enabled: true,
        strategies: [
            {
                key: 'user',
                storage: localStorage,
                path:[] //可以選擇保存的字段  其余的不保存
            }
        ]
    }

“Pinia狀態(tài)持久化問(wèn)題怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！