防止状态管理内存泄漏需主动控制存取边界、及时清理资源、规避响应式副作用：只存必要可序列化数据，组件卸载时重置专属状态，统一管理并显式销毁副作用，减少深层响应式追踪。
防止状态管理带来的内存泄漏，核心是不让 store 成为“垃圾回收盲区”——它不会自动清理数据，也不感知组件生命周期。关键在于主动控制状态存取边界、及时释放关联资源、规避响应式系统副作用。
只存必要、可序列化的轻量数据
store 不是万能缓存池，大对象、非 JS 值、持有外部引用的对象都不该进 state：
- 避免直接 commit 整个后端响应（尤其含二进制、长文本、千级嵌套树）
- 不缓存 DOM 节点、Canvas 实例、File 对象、EventSource、Promise 等不可序列化资源
- 不存函数或 this 绑定方法——它们会隐式维持对组件实例的强引用
✅ 推荐做法：state 中只保留业务 ID、状态标志、结构化字段等；复杂对象用 WeakMap 或组件内 ref 管理，与 store 解耦。
组件卸载时同步清理专属状态
store 没有自动 GC，必须在组件离开时手动归零或重置其专属状态：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- Pinia 用户可在组件 onUnmounted 中调用
store.$reset()或自定义clearForm()action - Vuex 用户建议按路由/模块动态注册，离开页面时调用
unregisterModule，避免残留模块 - 对表单草稿、搜索历史、临时筛选条件等，设计带命名空间的 reset 方法，避免全局污染
统一管理副作用并显式销毁
状态管理常伴随副作用（WebSocket、定时器、事件订阅），这些必须和 store 状态联动销毁：
- 在 store 的 actions 中提供 connect / disconnect 成对方法，把连接逻辑封装起来
- 组件中 onMounted 调用 connect，onUnmounted 调用 disconnect
- 第三方 SDK（如地图、图表、MQTT 客户端）务必调用其
.destroy()或.end()方法，不能只删 DOM
减少响应式开销，避开深层追踪陷阱
Vue 的响应式系统会对每个属性建立依赖链，超大结构或频繁变更值会拖慢 GC 并增加内存驻留：
- 海量只读列表用 markRaw 包裹原始数据，再通过 computed 提取视图所需字段
- 避免在 state 中存
new Date()、Math.random()等每次渲染都变的值 - 深拷贝优先用 structuredClone，替代
JSON.parse(JSON.stringify())避免中间对象爆炸
真正的问题不在 store 本身，而在我们如何使用它。监控不是可选项——打开 Chrome Memory 面板抓堆快照，重点看 Proxy 实例数和 VueComponent 引用是否随路由反复进入而持续增长，就能确认是否已堵住泄漏源头。
