关于Pinia状态持久化问题

Pinia状态持久化

在vue3中，常用Pinia代替Vuex来进行状态管理。这里贴上Pinia的官网，有兴趣的可以去了解一下。Pinia

其他过程就省略了，今天在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')

Pinia数据持久化处理

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:[] //可以选择保存的字段  其余的不保存
            }
        ]
    }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程宝库。

reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往 ...