vue3+vite+ts配置pinia数据持久化

以下操作全部在main.ts执行

• 引入pinia

import {createPinia, PiniaPluginContext} from "pinia"

• 定义存储的key，存储到本地

const _KEY_: string = 'session-key'
const setSession = (key: string, value: any) => {
  sessionStorage.setItem(key, JSON.stringify(value))
}

• 获取本地存储的数据，用于回填

const getSession = (key: string) => {
  return sessionStorage.getItem(key) ? JSON.parse(sessionStorage.getItem(key) as string) : {}
}

• 修改后的数据进行覆盖或存储

interface Options {
  key: string
}
const piniaPlugin = (options: Options) => {
  return (context: PiniaPluginContext) => {
    const { store } = context
    const data = getSession(`${options?.key ?? _KEY_}-${store.$id}`)
    store.$subscribe(() => {
      setSession(`${options?.key ?? _KEY_}-${store.$id}`, toRaw(store.$state))
    })
    return {
      ...data
    }
  }
}

const piniaStore = createPinia()

piniaStore.use(piniaPlugin({
  key: 'pinia'
}))