Pinia需手动实现撤销重做，核心是精准快照业务状态、语义化action触发track、栈式管理还原；只对doc等业务子对象快照，用toRaw+structuredClone深拷贝，omit敏感字段，undo/redo保持响应式连接。
Pinia 本身不内置撤销重做，但在富客户端（如编辑器、表单构建器、可视化画布）中实现可靠的时间旅行式操作历史，关键在于精准快照 + 明确粒度 + 安全还原。不是所有状态都该进历史栈，也不是每次赋值都要记录——得由业务语义驱动。
只对核心业务状态做快照
富客户端里常混杂 UI 状态（loading、isEditing）、临时数据（dragOffset、hoverId）和真实业务数据（文档内容、节点拓扑、表单项值）。撤销应聚焦后者：
- 把可撤销字段显式收拢到一个子对象中，例如
state: { doc: { title: '', blocks: [] }, ui: { sidebarOpen: true } }→ 只对doc快照 - 用
toRaw()+structuredClone()（推荐）或JSON.parse(JSON.stringify())获取纯净副本；避免直接深拷贝整个$state，否则响应式代理会被剥离或性能骤降 - 敏感字段（如
updatedAt、syncStatus）可在插件配置中omit掉，防止时间跳跃后时间戳错乱
在语义明确的 action 中触发 track
撤销粒度由你定义，不是“每改一个字段就记一次”，而是“用户完成一次有意义操作才存档”：
- ✅
addBlock(type) { this.track(); this.doc.blocks.push(createBlock(type)); } - ✅
reorderBlocks(newOrder) { this.track(); this.doc.blocks = newOrder.map(i => this.doc.blocks[i]); } - ❌
setDragging(pos) { this.ui.dragPos = pos; }—— 拖拽中间态不进历史 - ❌
updatePreview(html) { this.ui.preview = html; }—— 预览是衍生视图，非源数据
用栈结构管理历史并安全还原
撤销/重做本质是游标在快照数组上的移动，还原时必须保持响应式连接不中断：
- 使用两个栈：
undoStack: Snapshot[]和redoStack: Snapshot[]，每次track()清空redoStack -
undo()：弹出undoStack顶部快照，用Object.assign(this.doc, snapshot)或解构更新（this.doc = { ...snapshot }），避免this.doc = snapshot直接替换丢失响应式 -
canUndo / canRedo是计算属性，基于undoStack.length > 0和redoStack.length > 0，用于禁用按钮或灰化菜单项
集成快捷键与调试支持
富客户端需兼顾效率与可维护性：
- 组合键监听建议用
@vueuse/core的onKeyStroke，如onKeyStroke('z', () => store.undo(), { prevent: true, modifiers: { ctrl: true } }) - 在
track()时传入描述字符串（如this.track('插入图片模块')），配合history栈展示操作简史，方便用户理解“撤销的是什么” - 启用
Pinia Devtools后，可在 Vue 面板中点击“Jump to this state”直接跳转任意快照，用于快速复现问题或演示流程
