插件机制、状态持久化、DevTools 支持

Pinia 的插件系统、持久化方案和开发者工具支持，是它在实际项目中“好用”的关键保障。这三者各司其职，让状态管理从“能跑”进化到“可维护、可调试、可持久”。

插件机制：给每个 Store 统一加能力

Pinia 的插件本质上是一个函数，它会在每个 Store 被创建时自动调用一次。你可以在这个函数里为所有 Store 统一添加属性、方法，或者植入全局逻辑。

核心用法：

// main.js 中注册插件
import { createPinia } from 'pinia'

const pinia = createPinia()

// 自定义插件：给每个 Store 添加 $http 方法
pinia.use(({ store }) => {
  // 在 Store 上挂载公共方法
  store.$http = (url, params) => {
    // 封装好的请求逻辑
    return axios.get(url, { params })
  }
  
  // 监听所有 Store 的状态变化
  store.$subscribe((mutation, state) => {
    console.log(`${mutation.storeId} 的状态变了`, state)
  })
})

app.use(pinia)

常见场景：

全局注入能力：把 Axios 实例、路由实例、i18n 翻译函数挂到每个 Store 上，后续直接在 Actions 里通过 this.$http 或 store.$t 调用，不用重复导入。
统一错误处理：包装 Actions 的执行，捕获异常后上报到监控系统或弹出全局提示。
状态变更日志：在开发环境监听所有 Store 的 $subscribe，方便追踪哪个操作触发了哪部分状态变化。
重置机制：在插件中给每个 Store 添加 $reset 方法，一键恢复到初始状态。

插件是 Pinia 生态中相当灵活的扩展点，很多第三方库（如持久化插件）就是通过这套机制集成的。

状态持久化：刷新页面不丢数据

默认情况下，Pinia 的状态只保存在浏览器内存中，用户一刷新页面就全部丢失。很多场景需要“记住”某些状态（比如用户登录 Token、购物车内容、表单草稿），这时就需要持久化。

手动实现（浅层持久化）：

// 一个简化版的持久化思路
pinia.use(({ store }) => {
  // 从 localStorage 恢复数据
  const saved = localStorage.getItem(`pinia-${store.$id}`)
  if (saved) {
    store.$patch(JSON.parse(saved))
  }
  
  // 每次状态变化时，存到 localStorage
  store.$subscribe((mutation, state) => {
    localStorage.setItem(`pinia-${store.$id}`, JSON.stringify(state))
  })
})

使用社区插件 pinia-plugin-persistedstate：
这个插件已经封装好了配置，支持更高级的需求：

// 安装
// pnpm add pinia-plugin-persistedstate

// main.js
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

// 在 Store 中按需开启
export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null
  }),
  persist: {
    key: 'my-app-user',           // 自定义存储 key
    storage: localStorage,         // 换成 sessionStorage 也行
    paths: ['token'],              // 只持久化 token，userInfo 不存
  }
})

实际注意事项：

敏感信息不要持久化：密码、明文验证码等绝不应该存入 localStorage，这有安全风险。只存 Token 或必要的非敏感状态。
持久化粒度控制：一个 Store 里几十个字段，往往只需要持久化其中两三个（如 Token、用户偏好），用 paths 精确指定，避免垃圾数据堆积。
版本迁移：如果持久化的数据结构在版本迭代中变了，旧的 localStorage 数据可能导致解析报错或逻辑异常。实际项目中通常会加一个 version 字段，检测到版本不一致时清除旧数据或做迁移。
服务端渲染兼容：SSR 场景下没有 window 对象，插件需要做环境判断，避免报错。

简而言之，持久化不是默认开启的，但开启方式极其简单——只要引入插件、在 Store 上配 persist 配置项即可。

DevTools 支持：状态调试利器

Vue DevTools 是官方提供的浏览器扩展，它包含一个专门的 Pinia 面板，让状态管理不再“黑盒”。打开后你能看到：

所有 Store 列表：当前注册了哪些 Store，各自的 $id（名称）一目了然。
实时状态数据：选中一个 Store，右侧直接展示它当前所有的 state 字段、getters 计算值，并且是实时变化的。你在页面上点一个按钮，这里的数据马上跟着变，不需要手动刷新或打印。
Actions 执行追踪：DevTools 会记录每一次 Actions 的调用，像一条时间轴，你可以回溯“用户做了什么操作导致了当前状态”。点击某条记录还能看到 Actions 传入的参数。
时间旅行调试：这是最强大的能力。你可以用撤销/重做按钮，回退到前几个状态快照，或者前进到后一个快照，观察界面怎么跟着变化。以前要排查“数据什么时候、在哪里被改成错误值”的问题，只能在代码里加一堆 console.log；现在直接在 DevTools 里拖动时间轴就能定位。
状态编辑：在 DevTools 面板中直接修改某个字段的值，界面会自动响应更新。这特别适合验证边界情况——比如你想看看“用户名为空时界面怎么显示”，直接在 DevTools 里把 username 改空就行，不用特意构造数据。

开启条件：

使用 Vue 3 项目（Vue 2 支持有限）。
安装 Chrome / Firefox 版的 Vue DevTools 扩展。
在 createPinia() 时，如果传了 devtools: false（极少需要），则关闭调试支持。默认是开启的。

这套调试体验让 Pinia 的状态流转完全透明，一个多人协作的中大型项目，新人接手时完全可以“跟踪”一遍状态变化，快速理解业务逻辑，而不是靠猜或者翻文档。