uniapp中使用pinia持久化

前言

uniapp+vue3+pinia的项目,如果想做数据持久化,一般会使用pinia-plugin-persistedstate这个库,但是有个痛点就是,如果你的项目想打包成各种小程序,实际上这个库是不支持其他小程序的缓存api的,所以,我自己实现一个插件来达到数据持久化的目的 请忽略我的any

插件代码

// 由于pinia只支持浏览器的持久化,所以uni里要单独写插件
const init = (context: any) => {
  const cacheData = uni.getStorageSync('cacheData')
  if (!cacheData) return
  const data = JSON.parse(cacheData)
  for (const key in data) {
    context.store[key] = data[key] 
  }
}
const updateCacheData = (context: any) => {
  context.store.$subscribe((
    _mutation :any,
    state:any,
    ) => {
    uni.setStorage({
      key: 'cacheData',
      data: JSON.stringify(state),
    })
  })
}
export const piniaPluginPersistedstate = (context: any) => {
  init(context)
  updateCacheData(context)
}

使用

// main.ts

import { createSSRApp } from 'vue'
// import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import { piniaPluginPersistedstate } from '@/utils/piniaSesstion'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
export function createApp() {
  const app = createSSRApp(App)
  app.use(pinia)

  return {
    app,
  }
}