Vue3 + Vite 项目引入 pinia 和 pinia-plugin-persistedstate

一、Pinia

1. 简介

Pinia 是 Vue.js 官方推荐的状态管理库，是 Vuex 的轻量替代品，设计更简单、功能更强大，并且支持模块化和 TypeScript。

2. Pinia 的主要特点

1. 简单易用：

   API 设计直观，与 Vue Composition API 深度结合。

2. 支持模块化：

   每个 store 独立管理，减少全局 store 复杂性。

3. 热更新：

   支持 HMR（Hot Module Replacement），开发时无需手动刷新。

4. 支持 TypeScript：

   提供更好的类型推导和代码提示。

5. 无依赖：

   不需要额外的插件或中间件，集成更轻松。

二、Pinia Plugin PersistedState

1. 简介

pinia-plugin-persistedstate 是 Pinia 的一个插件，用于持久化存储状态。它将 store 的状态保存在 localStorage 或 sessionStorage 中，即使页面刷新或关闭后再次打开，状态依然会被恢复。

2. 插件特点

1. 支持存储到 localStorage 或 sessionStorage。
2. 可选择性持久化某些 store 或字段。
3. 集成简单，自动同步状态。
4. 支持自定义序列化（如 JSON）和反序列化逻辑。

3. PersistedState 配置项

persist 字段用于配置持久化存储的策略。

常见配置项

配置项	类型	默认值	描述
enabled	boolean	false	是否启用持久化存储。
key	string	Store 名称	存储在 Storage 中的键名。
storage	Storage	localStorage	存储方式，可选 localStorage 或 sessionStorage。
paths	string[]	undefined	选择性持久化某些字段（不设置则默认存储全部）。
serializer	object	内置 JSON 序列化器	自定义序列化器，包括 serialize 和 deserialize。

4. 示例：选择性持久化字段

如果只想持久化 name 字段：

persist: {
   
  enabled: true,
  strategies: [
    {
   
      key: 'user',
      storage: localStorage,
      paths: ['name'], // 只持久化 `name`
    },
  ],
},

5. 示例：自定义序列化器

如果需要自定义存储格式（如 Base64）：

persist: {
   
  enabled: true,
  strategies: [
    {
   
      key: 'user',
      storage: sessionStorage,
      serializer: {
   
        serialize: (value) => btoa(JSON.stringify(value)),