Vue 3 中 KeepAlive 组件失活时需主动持久化草稿：按路由参数隔离存 localStorage 或用 pinia-plugin-persistedstate 动态 key 实现路由级隔离，并在提交后及时清理。
在 Vue 3 中，用 onDeactivated）并不会自动保存草稿——Pinia 里的状态默认只存在内存中，页面刷新或意外卸载就会丢失。所以“失活时保存草稿”需要你主动触发持久化动作，关键在于：区分状态归属 + 选择合适时机 + 明确保存位置。
✅ 明确草稿属于谁：组件私有还是跨页共享？
表单草稿仅属于当前 tab 页面（比如编辑订单 /user/1001）
→ 不该放全局 Pinia store，否则/user/1001和/user/1002会互相覆盖。
→ 推荐：用 带唯一 key 的局部 store 实例，或直接用localStorage按路由参数隔离存储。草稿需跨页面、跨刷新保留（比如新建草稿、多步骤表单）
→ 适合放在 Pinia store 中，并配合持久化插件（如pinia-plugin-persistedstate），但要注意配置key或paths避免污染。
✅ 在 onDeactivated 中保存草稿的实操写法
假设你有一个订单编辑页 OrderEdit.vue，使用了 useOrderStore：
<script setup>
import { onDeactivated, onActivated } from 'vue'
import { useOrderStore } from '@/stores/order'
const store = useOrderStore()
const route = useRoute()
// 失活时：把当前订单的草稿存进 localStorage（按 route.params.id 隔离）
onDeactivated(() => {
if (route.params.id) {
const key = `order-draft-${route.params.id}`
localStorage.setItem(key, JSON.stringify(store.formData))
}
})
// 激活时：尝试恢复草稿（可选）
onActivated(() => {
if (route.params.id) {
const key = `order-draft-${route.params.id}`
const draft = localStorage.getItem(key)
if (draft) {
store.$patch(JSON.parse(draft))
}
}
})
</script>
⚠️ 注意：不要在
onDeactivated里直接调store.saveToServer()这类异步操作——它不保证执行完成，且用户切走后网络可能中断。
✅ 更健壮的方案：Pinia 持久化插件 + 路由级隔离
如果你希望统一管理、避免手动写 localStorage，可用 pinia-plugin-persistedstate 并动态设置 storage key：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
// stores/order.ts
import { defineStore } from 'pinia'
export const useOrderStore = defineStore('order', {
state: () => ({
formData: { name: '', amount: 0 },
id: null as string | null
}),
persist: {
key: (ctx) => `order-store-${ctx.store.$state.id || 'new'}`,
storage: localStorage,
paths: ['formData']
}
})
然后在组件中设置 id：
const store = useOrderStore() store.id = route.params.id as string // 触发 persist key 重算
这样每个不同 ID 的编辑页，就拥有独立的持久化空间，互不干扰。
✅ 补充提醒：别忘了清理
- 用户关闭 tab 或提交成功后，记得清除对应草稿：
// 提交成功后 localStorage.removeItem(`order-draft-${route.params.id}`) - 或在 Pinia store 的 action 中加清理逻辑：
actions: { submit() { // ...请求 this.$reset() // 清空本地状态 localStorage.removeItem(this.$persist.key()) // 清空持久化数据 } }
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
