直接用 JSON.stringify(store) 报错的根本原因是响应式代理暴露了可枚举的循环路径，应使用 store.$state 或 store.$rawState 安全序列化，避免直接序列化代理对象。
直接用 JSON.stringify(store) 会报错，根本原因不是“不能有循环”，而是响应式代理在序列化时暴露了可枚举的循环路径。解决重点是隔离序列化行为，而不是强行扁平化数据结构。
优先使用 store.$state 或 $rawState
Pinia 的 store.$state 返回的是当前状态的非响应式快照，天然规避代理层干扰；store.$rawState（v2.1+）更进一步，返回未经任何 proxy 包装的原始对象。两者都可安全序列化：
-
JSON.stringify(store.$state)—— 推荐日常使用，轻量、语义清晰 -
JSON.stringify(store.$rawState)—— 适合需要导出含 Symbol、Map 等不可序列化字段原始值的场景 - 避免直接
JSON.stringify(store)，它会尝试遍历整个响应式代理，极易触发循环报错
对不可响应的对象主动“脱敏”
第三方类实例（如 API 客户端、自定义 Model）、DOM 元素、Map/Set 等本就不该进入响应式系统。一旦被 reactive 包裹，就可能引入隐式循环：
- 创建时就用
markRaw(new ApiClient())，再赋值给 store 属性 - store 中持有子 store 实例？改用事件通信（
store.$onAction）或回调函数，而非直接赋值引用 - 大型嵌套树结构（如编辑器节点），用
shallowReactive替代reactive，只代理第一层，切断深层追踪
调试与导出时手动构造纯对象
开发中常因 console.log(JSON.stringify(store)) 报错，本质是调试方式不当。应建立明确的数据出口习惯：
立即学习“前端免费学习笔记（深入）”；
- 导出配置或备份状态时，显式提取所需字段：
{ user: store.user, count: store.count } - 封装一个安全序列化函数，内部用
replacer过滤掉函数、以$开头的属性、以及已见过的引用（可用 WeakSet 缓存检测） - 若项目已用
vuex-persist，启用supportCircular: true，它会自动切换为 Flatted 等支持循环的序列化器
识别并切断高危循环源头
不是所有循环都危险，但以下模式极易引发问题：
- store A 直接赋值 store B，而 store B 又持有 store A
- 响应式对象显式自引用：
node.parent = node，且parent是可枚举属性 - 在
computed或watch中访问未toRaw()解包的循环对象，导致 proxy 嵌套加深 - 把 Vue 组件实例、
this上下文或整个$route对象挂进 store
不复杂但容易忽略
