使用pinia-plugin-persistedstate实现部分状态持久化

在Vue应用开发中，状态管理是一个非常重要的环节。Pinia作为Vue的官方推荐状态管理库，提供了简洁高效的API。而pinia-plugin-persistedstate插件则为Pinia添加了状态持久化功能，可以将状态保存到本地存储中，实现页面刷新后状态不丢失的效果。

状态持久化的基本使用

通常情况下，我们可以通过简单的配置实现整个store的持久化：

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({
    userInfo: {},
    themeMode: 'light',
    sidebarCollapsed: false
  }),
  persist: true
})

这样配置后，整个store的状态都会被持久化到localStorage中。但实际开发中，我们经常会遇到只需要持久化部分状态的需求。

选择性持久化状态

在某些场景下，我们可能只需要持久化store中的部分状态。例如：

1. 用户信息需要持久化，但临时状态不需要
2. 主题偏好需要持久化，但UI状态不需要
3. 某些敏感信息不应该存储在本地

pinia-plugin-persistedstate提供了paths配置项，允许我们精确控制需要持久化的状态属性：

export const useStore = defineStore('main', {
  state: () => ({
    userInfo: {},       // 需要持久化
    themeMode: 'light', // 需要持久化
    isLoading: false    // 不需要持久化
  }),
  persist: {
    paths: ['userInfo', 'themeMode']
  }
})

实际应用场景

假设我们有一个电商应用，需要管理以下状态：

export const useShopStore = defineStore('shop', {
  state: () => ({
    cartItems: [],      // 购物车商品 - 需要持久化
    userToken: null,    // 用户令牌 - 需要持久化
    searchQuery: '',    // 搜索词 - 不需要持久化
    isCheckingOut: false // 结账状态 - 不需要持久化
  }),
  persist: {
    paths: ['cartItems', 'userToken']
  }
})

这种选择性持久化的优势在于：

1. 减少不必要的本地存储占用
2. 避免敏感信息意外存储
3. 提高应用性能，减少序列化/反序列化开销

高级配置选项

除了paths外，pinia-plugin-persistedstate还提供了其他有用的配置选项：

persist: {
  paths: ['userInfo'],
  key: 'custom-storage-key', // 自定义存储键名
  storage: sessionStorage,   // 使用sessionStorage替代localStorage
  serializer: {              // 自定义序列化方式
    serialize: JSON.stringify,
    deserialize: JSON.parse
  }
}

注意事项

1. 对于嵌套对象，可以使用点表示法指定路径：paths: ['user.profile']
2. 数组路径也是支持的：paths: ['todos.0.done']
3. 动态计算属性(getters)默认不会被持久化
4. 修改持久化配置后，可能需要清除旧的存储数据

通过合理使用部分状态持久化功能，我们可以在保证关键状态不丢失的同时，优化应用性能和安全性。