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

小程序Pinia持久化

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

持久化存储插件

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

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

网页端持久化 API

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

多端持久化 API

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

参考代码
uniapp项目实战第五章:小程序Pinia持久化_第1张图片

// 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]
        },
      },
    },
  },
)
  • 现在可以持续化了
    uniapp项目实战第五章:小程序Pinia持久化_第2张图片

uniapp项目实战第五章:小程序Pinia持久化_第3张图片

你可能感兴趣的:(uni-app学习之旅,uni-app,小程序)