Pinia 本身不内置撤销功能，但可通过响应式状态和 store 扩展实现轻量可靠的 undo/redo：1. 用 ref 管理 history 和 redoStack，提供 saveSnapshot()；2. 在业务 store 中手动调用快照、实现 undo/redo；3. 控制粒度、限制步数、优化内存；4. 组件中绑定快捷键与 UI 反馈。
Pinia 本身不内置撤销（undo/redo）功能，但借助其响应式状态和可扩展的 store 设计，可以轻松实现一个轻量、可靠、与 Vue 生态无缝集成的撤销栈。核心思路是：在每次关键状态变更前保存快照，并维护一个历史栈和重做栈。
1. 定义带撤销能力的 Store 结构
创建一个通用的撤销增强型 store，避免每个业务 store 都重复逻辑。推荐用 store 工厂函数 + 插件式封装 的方式：
- 用
ref维护history（数组，存状态快照）和redoStack（数组，存待重做的快照） - 快照建议用
structuredClone（现代浏览器）或浅克隆 + 关键字段白名单（兼容性要求高时） - 提供
saveSnapshot()方法，在业务逻辑变更前手动调用（如用户点击“修改标题”后、提交表单前）
2. 在业务 Store 中启用撤销能力
以编辑文章为例，在定义 store 时混入撤销逻辑：
- 在
state中声明需要纳入撤销范围的数据（如title,content,tags） - 在
actions中，所有会改变这些字段的操作前调用this.saveSnapshot() - 添加
undo()和redo()方法，分别从history弹出并恢复，或从redoStack恢复 - 注意：还原时应使用
$patch或直接赋值，确保响应式更新生效
3. 控制快照粒度与内存优化
频繁保存快照会占用内存并影响性能，需合理控制：
- 默认只在用户显式操作（如 Ctrl+Z、点击按钮）前保存，而非响应式 setter 触发时自动保存
- 限制历史长度（如最多保存 50 步），超出时
shift()丢弃最早快照 - 对大型字段（如富文本内容）可考虑只保存 diff（需额外引入 diff 库），或仅保存变更字段而非全量深克隆
- 撤销栈变更时，可通过
watch监听history.length更新 UI 按钮禁用状态
4. 与 Vue 组件联动：快捷键 & UI 反馈
在组件中接入撤销功能，提升用户体验：
- 用
onMounted注册全局键盘监听：Ctrl+Z触发undo，Ctrl+Shift+Z或Ctrl+Y触发redo - 绑定按钮的
disabled状态：:disabled="!canUndo"和:disabled="!canRedo"，对应 store 中计算属性 - 可选：添加轻量动画或 toast 提示，例如“已撤销上一步更改”
不复杂但容易忽略的是快照时机——不是“状态变了就存”，而是“用户意图明确要改时才存”。Pinia 的灵活性让你能精准控制每一步，而不是被框架绑架。真正落地时，往往 30 行核心代码 + 合理的业务钩子，就能让编辑体验跃升一个层级。
