uniapp项目实战第五章：小程序Pinia持久化

极客李华

已于 2023-09-12 09:54:53 修改

阅读量2.6k

点赞数 4

分类专栏： uni-app学习之旅文章标签： uni-app 小程序

于 2023-08-17 17:54:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51447496/article/details/132346022

版权

uni-app学习之旅专栏收录该内容

19 篇文章

订阅专栏

文章讲述了如何在小程序项目中使用Pinia时处理持久化插件的兼容性问题，介绍了一种通过pinia-plugin-persistedstate插件并替换localStorage以适应小程序端API的方法，以及提供了uni.setStorageSync和uni.getStorageSync的多端兼容API示例。

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

小程序Pinia持久化

说明：项目中 Pinia 用法平时完全一致，主要解决持久化插件兼容性问题。

持久化存储插件

持久化存储插件： pinia-plugin-persistedstate

插件默认使用 localStorage 实现持久化，小程序端不兼容，需要替换持久化 API。

网页端持久化 API

// 网页端API
localStorage.setItem()
localStorage.getItem()

多端持久化 API

// 兼容多端API
uni.setStorageSync()
uni.getStorageSync()

参考代码
在这里插入图片描述

// stores/modules/member.ts
export const useMemberStore = defineStore(
  'member',
  () => {
    //…省略
  },
  {
    // 配置持久化
    persist: {
      // 调整为兼容多端的API
      storage: {
        setItem(key, value) {
          uni.setStorageSync(key, value) // [!code warning]
        },
        getItem(key) {
          return uni.getStorageSync(key) // [!code warning]
        },
      },
    },
  },
)