当前位置：首页 > article >正文

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

article 2025/2/13 7:05:29

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 的持久化插件能够正常工作