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

是阿臻

已于 2023-10-27 11:04:50 修改

阅读量2.7k

点赞数 4

文章标签： uni-app javascript 开发语言

于 2023-10-27 11:03:23 首次发布

本文链接：https://blog.csdn.net/weixin_43191327/article/details/134071863

版权

文章讲述了在uniapp环境中使用pinia-plugin-persistedstate遇到的问题，如何通过重写存储API，将默认的sessionStorage和localStorage替换为uniapp的setStorageSync和getStorageSync方法。提供了一个customStorage函数实现这一过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要在 uniapp 里面使用 pinia-plugin-persistedstate 会遇到的问题就是 uniapp里面没有浏览器里面的 sessionStorage localStorage 这些 api。
我们只需要替换掉 pinia-plugin-persistedstate 默认的储存 api 就可以了。使用 createPersistedState 重新创建一个实例, 把里面的 storage 的参数修改为对应的 uniapp 里面的 storage api 就可以. 已经提取在 customStorage 函数里面了.

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)
      }
    }
  })
}