KeepAlive 与 Pinia 不提供自动数据回滚，需手动保存并恢复页面私有状态；应为每个页面定义独立 Pinia 模块，在 onActivated 中读取快照、onDeactivated 中写入快照，隔离页面状态与全局数据。
KeepAlive 本身不提供数据回滚能力，Pinia 也不内置回滚机制；所谓“数据回滚”，本质是**手动保存 + 手动恢复**页面离开前的状态，配合 KeepAlive 的缓存生命周期实现“视觉与逻辑一致”的体验。
理解 KeepAlive 与 Pinia 的职责边界
KeepAlive 只缓存组件实例（包括 DOM、响应式状态、内部 setup 状态），但不会自动保存或同步 Pinia store 中的数据。如果用户在页面中修改了 store 数据，这些变更会全局生效——即使切换页面再回来，store 仍是最新值，而组件 UI 可能因未重置逻辑，与 store 出现不一致。
所以“回滚”不是靠框架自动完成，而是你主动决定：哪些数据属于“页面私有状态”，需要隔离保存；哪些属于“全局共享状态”，理应保留。
用 Pinia 模块 + 页面级快照实现状态隔离
推荐为每个需 KeepAlive 的页面定义独立的 Pinia store 模块，并在组件挂载/激活时读取快照，在离开前保存当前状态：
- 在页面组件的 onActivated 中，从该页面专属 store 拉取最新状态（或 fallback 到初始值）并同步到本地 reactive 对象
- 在 onDeactivated 中，把当前编辑中的表单、筛选条件、滚动位置等“页面私有状态”写入 store（不覆盖全局业务数据）
- 避免直接修改全局 store 的 state 字段；可加命名空间如 pageA_draft、pageB_filters
利用 KeepAlive 的 include/exclude 精准控制缓存范围
不是所有页面都需要回滚 —— 例如列表页适合缓存 + 保持筛选条件，详情页可能每次都要刷新数据。通过动态控制 include 列表，可以按需启用缓存：
- 路由元信息中标记 keepAlive: true，并在 router-view 外层用 computed 动态生成 include 数组
- 对敏感操作（如提交成功后）调用 router.replace({ name: 'PageX', query: { t: Date.now() } }) 强制刷新，绕过缓存
- 在 store 中暴露 resetPageState(pageName) 方法，退出时显式清空对应快照
补充技巧：结合 useRoute 和 watch 实现更自然的恢复逻辑
某些状态（如搜索关键词、分页页码）天然来自 URL 查询参数，这类数据无需额外快照——直接用 useRoute().query 读取，并在组件内用 watch 监听变化触发重新请求即可。真正需要“回滚”的，往往是用户未提交的草稿、临时折叠状态、未保存的表单输入等 UI 衍生状态。
把这些状态统一收集到一个 pageState 对象中，用 JSON.stringify / parse 序列化存入 store，比深克隆更轻量也更可控。
