关于uniapp使用pinia持久化配置兼容问题

import { defineStore } from 'pinia';
import { ref } from 'vue';
// 定义 Store
export const useMembersStore = defineStore('members', () => {


  // 状态
  const memberInfo = ref({})
  
  // actions
  const saveMemberInfo = (info: any) => {
    memberInfo.value = info
  }
  
  const clearMemberInfo = () => {
    memberInfo.value = {}
  }

  return {
    memberInfo,
    saveMemberInfo,
    clearMemberInfo
  }
},
{
  persist: {
    key: 'memberInfo',
    storage: {
      getItem(key) {
        return uni.getStorageSync(key) || null
      },
      setItem(key, value) {
        uni.setStorageSync(key, value)
      }
    }
  }
})

进行持久化配置,使用小程序uni兼容

在实例导出文件index.ts中

import { createPinia } from 'pinia';
import persist from 'pinia-plugin-persistedstate';
// 创建pinia实例
const pinia = createPinia();

// 使用持久化插件
pinia.use(persist);

export default pinia;
//模块统一导出
export * from './modules/members';

用的是pinia-plugin-persistedstate 持久化插件,因为它缺少两个依赖项

destr和deep-pick-omit,导致我一直报错

安装后

npm install deep-pick-omit


npm install destr

完美解决!!!

原因:

  • 依赖关系说明:
  • pinia-plugin-persistedstate 插件依赖于 destr 和 deep-pick-omit 这两个包
  • destr 用于安全地解析存储的数据(比如从 localStorage 读取的 JSON 字符串)
  • deep-pick-omit 用于处理深层对象的属性选择(比如选择性持久化 store 中的某些字段)
  • 为什么会出错:
  • 在新版本的打包工具中(如 Vite),所有依赖需要明确声明
  • 虽然 pinia-plugin-persistedstate 在其 package.json 中声明了这些依赖
  • 但在 UniApp 的构建环境中,这些间接依赖可能没有被正确解析和安装
  • 解决方案有效的原因:
  • 通过手动安装这两个依赖,我们确保了它们在项目的 node_modules 中可用
  • 打包工具现在可以找到并正确打包这些依赖
  • 这让 Pinia 的持久化插件能够正常工作

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值