如何在 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)
      }
    }
  })
}
相关推荐
Go Dgg5 分钟前
【Go + Gin 实现「双 Token」管理员登录】
开发语言·golang·gin
十五年专注C++开发32 分钟前
hiredis: 一个轻量级、高性能的 C 语言 Redis 客户端库
开发语言·数据库·c++·redis·缓存
WJ.Polar32 分钟前
Python数据容器-集合set
开发语言·python
晓131333 分钟前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
海底火旺42 分钟前
浏览器渲染全过程解析
前端·javascript·浏览器
前端付豪1 小时前
15、前端可配置化系统设计:从硬编码到可视化配置
前端·javascript·架构
nbsaas-boot1 小时前
Go语言生态成熟度分析:为何Go还无法像Java那样实现注解式框架?
java·开发语言·golang
aPurpleBerry1 小时前
hot100 hot75 栈、队列题目思路
javascript·算法
颜漠笑年1 小时前
可迭代对象≠数组,一起来揭开for...of背后隐藏的秘密吧
前端·javascript
xiaocainiao8811 小时前
Python 实战:构建可扩展的命令行插件引擎
开发语言·python