小程序端pinia持久化存储

227 阅读1分钟

小程序端pinia持久化存储

使用了插件pinia-plugin-persistedstate

  • 网页端API
    • lcalStorage.setItem() lcalStorage.getItem()
  • 小程序端API
    • wx.setStorageSync() wx.getStorageSync()
  • uniApp里
    • uni.setStorageSync() uni.getStorageSync()
import type { LoginResult } from '@/types/member'
import { defineStore } from 'pinia'
import { ref } from 'vue'

// 定义 Store
export const useMemberStore = defineStore(
  'member',
  () => {
    // 会员信息
    const profile = ref<LoginResult>()

    // 保存会员信息,登录时使用
    const setProfile = (val: LoginResult) => {
      profile.value = val
    }

    // 清理会员信息,退出时使用
    const clearProfile = () => {
      profile.value = undefined
    }

    // 记得 return
    return {
      profile,
      setProfile,
      clearProfile,
    }
  },
  {
    // 网页端配置
    // persist: true,
    // 小程序端配置
    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          uni.setStorageSync(key, value)
        },
      },
    },
  },
)

persist配置项,网页端直接写true,小程序要写成对象形式。