unibest状态管理：Pinia持久化存储-优快云博客

unibest状态管理：Pinia持久化存储

【免费下载链接】unibest unibest - 最好用的 uniapp 开发框架。unibest 是由 uniapp + Vue3 + Ts + Vite5 + UnoCss + WotUI 驱动的跨端快速启动模板，使用 VS Code 开发，具有代码提示、自动格式化、统一配置、代码片段等功能，同时内置了大量平时开发常用的基本组件，开箱即用，让你编写 uniapp 拥有 best 体验。项目地址: https://gitcode.com/feige996/unibest

还在为uniapp应用状态丢失而烦恼？每次刷新页面用户信息就消失？本文将深入解析unibest框架中Pinia状态持久化存储的最佳实践，让你彻底告别状态丢失的困扰！

通过阅读本文，你将掌握：

✅ Pinia持久化存储的核心原理与配置
✅ unibest框架中用户状态管理的完整实现
✅ 跨端存储适配与uni-app存储API的完美结合
✅ 实战案例：用户登录状态持久化最佳实践
✅ 常见问题排查与性能优化技巧

1. Pinia持久化存储概述

Pinia是Vue.js的下一代状态管理库，而pinia-plugin-persistedstate插件为其提供了强大的持久化能力。在uniapp跨端开发中，状态持久化尤为重要，因为：

用户体验：保持用户登录状态，避免重复登录
数据一致性：确保关键数据在应用重启后仍然可用
跨端兼容：适配不同平台的存储机制

1.1 核心依赖配置

在unibest框架中，持久化存储通过以下依赖实现：

{
  "dependencies": {
    "pinia": "2.0.36",
    "pinia-plugin-persistedstate": "3.2.1"
  }
}

2. unibest持久化存储架构

2.1 存储配置中心

unibest在src/store/index.ts中统一配置Pinia持久化：

import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'

const store = createPinia()
store.use(
  createPersistedState({
    storage: {
      getItem: uni.getStorageSync,
      setItem: uni.setStorageSync,
    },
  }),
)

export default store
export * from './user'

2.2 架构设计解析

mermaid

3. 用户状态管理实战

3.1 用户Store完整实现

src/store/user.ts展示了完整的用户状态管理：

import type { IUserInfoVo } from '@/api/types/login'
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { getUserInfo, login, logout, wxLogin, getWxCode } from '@/api/login'
import { toast } from '@/utils/toast'

// 初始化状态
const userInfoState: IUserInfoVo = {
  id: 0,
  username: '',
  avatar: '/static/images/default-avatar.png',
  token: '',
}

export const useUserStore = defineStore(
  'user',
  () => {
    const userInfo = ref<IUserInfoVo>({ ...userInfoState })
    
    // 设置用户信息（自动持久化）
    const setUserInfo = (val: IUserInfoVo) => {
      if (!val.avatar) {
        val.avatar = userInfoState.avatar
      } else {
        val.avatar = 'https://oss.laf.run/ukw0y1-site/avatar.jpg?feige'
      }
      userInfo.value = val
    }

    // 手动存储控制
    const removeUserInfo = () => {
      userInfo.value = { ...userInfoState }
      uni.removeStorageSync('userInfo')
      uni.removeStorageSync('token')
    }

    const getUserInfo = async () => {
      const res = await _getUserInfo()
      const userInfo = res.data
      setUserInfo(userInfo)
      uni.setStorageSync('userInfo', userInfo)
      uni.setStorageSync('token', userInfo.token)
      return res
    }

    return {
      userInfo,
      login,
      wxLogin,
      getUserInfo,
      setUserAvatar,
      logout,
    }
  },
  {
    persist: true, // 启用自动持久化
  }
)

3.2 状态流转时序图

mermaid

4. 高级配置与自定义

4.1 存储策略配置

// 自定义存储配置
store.use(createPersistedState({
  storage: {
    getItem: (key: string) => {
      // 自定义获取逻辑
      return uni.getStorageSync(key)
    },
    setItem: (key: string, value: any) => {
      // 自定义设置逻辑
      uni.setStorageSync(key, value)
    },
  },
  serializer: {
    serialize: JSON.stringify,
    deserialize: JSON.parse,
  },
  key: (id) => `pinia_${id}`, // 自定义key前缀
}))

4.2 选择性持久化

// 只持久化部分状态
{
  persist: {
    paths: ['userInfo', 'settings'], // 只持久化这些字段
    exclude: ['temporaryData'] // 排除这些字段
  }
}

5. 跨端存储适配表

平台	存储机制	容量限制	持久性
H5	localStorage	5MB	持久
微信小程序	wx.setStorageSync	10MB	持久
App	plus.storage	无明确限制	持久
支付宝小程序	my.setStorageSync	10MB	持久

6. 最佳实践与性能优化

6.1 存储大小控制

// 避免存储过大对象
const optimizeUserInfo = (userInfo: IUserInfoVo) => {
  return {
    id: userInfo.id,
    username: userInfo.username,
    avatar: userInfo.avatar,
    token: userInfo.token
    // 排除不必要的大字段
  }
}

6.2 存储异常处理

const safeStorage = {
  setItem: (key: string, value: any) => {
    try {
      if (typeof value === 'object') {
        value = JSON.stringify(value)
      }
      uni.setStorageSync(key, value)
    } catch (error) {
      console.error('存储失败:', error)
      // 可降级到内存存储或提示用户
    }
  },
  getItem: (key: string) => {
    try {
      const value = uni.getStorageSync(key)
      try {
        return JSON.parse(value)
      } catch {
        return value
      }
    } catch (error) {
      console.error('读取存储失败:', error)
      return null
    }
  }
}

7. 常见问题解决方案

7.1 存储数据格式错误

问题：JSON解析失败 解决方案：

// 增强反序列化处理
const deserialize = (value: string) => {
  try {
    return JSON.parse(value)
  } catch {
    // 尝试其他格式或返回原始值
    return value
  }
}

7.2 存储空间不足

问题：各平台存储限制不同 解决方案：

// 检查存储空间
const checkStorageSpace = async () => {
  try {
    // 测试存储少量数据
    uni.setStorageSync('test_space', 'test')
    uni.removeStorageSync('test_space')
    return true
  } catch (error) {
    console.warn('存储空间可能不足')
    return false
  }
}

8. 总结

unibest框架通过Pinia + pinia-plugin-persistedstate的组合，为uniapp应用提供了完整的状态持久化解决方案。关键优势包括：

开箱即用：默认配置即可实现自动持久化
跨端兼容：自动适配各平台存储API
灵活配置：支持自定义存储策略和选择性持久化
性能优化：内置存储大小控制和异常处理

通过本文的实战指南，你可以轻松实现：

✅ 用户登录状态的自动持久化
✅ 跨平台数据一致性保障
✅ 存储性能优化和异常处理
✅ 复杂的业务状态管理需求

现在就开始在你的unibest项目中应用这些最佳实践，打造更加稳定可靠的跨端应用吧！

提示：在实际开发中，建议根据具体业务需求调整持久化策略，平衡数据持久性和存储性能。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考