如何在 uniapp 里面使用 pinia 数据持久化 (pinia-plugin-persistedstate)

想要在 uniapp 里面使用 pinia-plugin-persistedstate 会遇到的问题就是 uniapp里面没有浏览器里面的 sessionStorage localStorage 这些 api

我们只需要替换掉 pinia-plugin-persistedstate 默认的储存 api 就可以了。使用 createPersistedState 重新创建一个实例, 把里面的 storage 的参数修改为对应的 uniapp 里面的 storage api 就可以. 已经提取在 customStorage 函数里面了.

ts 复制代码
import 'virtual:uno.css'
import { createSSRApp } from "vue";
import uviewPlus from 'uview-plus'
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'
import App from "./App.vue";
export function createApp() {
  const pinia = createPinia()
  pinia.use(customStorage())
  const app = createSSRApp(App);
  app.use(uviewPlus)
  app.use(pinia)
  return {
    app,
    pinia
  };
}

/**
 * @description 自定义pinia持久化api储存方式为 unisetStorageSync
 * @returns 
 */
function customStorage() {
  return createPersistedState({
    storage: {
      getItem(key: string) {
        return uni.getStorageSync(key)
      },
      setItem(key: string, value: any) {
        uni.setStorageSync(key, value)
      }
    }
  })
}
相关推荐
rzl0224 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang26 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景28 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼28 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再32 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55537 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
FogLetter44 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
拾光拾趣录1 小时前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
m0_687399841 小时前
写一个Ununtu C++ 程序,调用ffmpeg API, 来判断一个数字电影的视频文件mxf 是不是Jpeg2000?
开发语言·c++·ffmpeg
爱上语文1 小时前
Redis基础(5):Redis的Java客户端
java·开发语言·数据库·redis·后端