如何在 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)
      }
    }
  })
}
相关推荐
悠悠~飘7 分钟前
php学习(第二天)
开发语言·学习·php
oioihoii23 分钟前
构造函数和析构函数中的多态陷阱:C++的隐秘角落
java·开发语言·c++
bestadc1 小时前
LeetCode 几道 Promises 和 Time 的题目
javascript·算法·leetcode
索迪迈科技1 小时前
java后端工程师进修ing(研一版‖day42)
java·开发语言·学习·算法
萌萌哒草头将军1 小时前
Node.js v24.8.0 新功能预览!🚀🚀🚀
前端·javascript·node.js
太空游走的鱼2 小时前
Vue3 + Vite + Element Plus web转为 Electron 应用,解决无法登录、隐藏自定义导航栏
javascript·electron·vue3·管理系统·element plsu
Chris.Yuan7702 小时前
Java代理模式详解
java·开发语言·代理模式
Forever_Hopeful2 小时前
【C 语言生成指定范围随机数(整数 + 小数):原理、实现与避坑指南】
服务器·c语言·开发语言
GISer_Jing2 小时前
Next系统学习(二)
前端·javascript·node.js
午夜游鱼2 小时前
Go 泛型实战:一行代码封装 sync.Pool,性能与安全兼得
开发语言·安全·golang