在 vue 3 + pinia 应用中，直接解构 `state[id]` 的属性（如 `name`、`type`）会导致响应性丢失；需借助 `computed` 的 getter/setter 或 `toref` 配合动态路径实现双向响应式绑定。
在使用 Pinia 管理扁平化 ID 映射对象（如 { '1': { name: '...', type: '...' } }）时，组件常需基于 props.id 提取并双向绑定其子属性。但若直接写 const { name, type } = things.value[id]，会切断响应链——因为解构产生的是普通 JS 对象属性副本，不再追踪 things 的响应式变化。
✅ 正确做法是：为每个字段创建独立的响应式引用，推荐两种生产就绪方案：
方案一：使用 computed（推荐，语义清晰、控制力强）
✅ 优势：显式控制读写逻辑，可安全处理 id 不存在的情况（?. 和空值 fallback），且完全保持响应性。
方案二：使用 toRef（简洁，适用于已确认 ID 存在的场景）
⚠️ 注意：toRef(thingStore.things, props.id) 仅在 props.id 对应的 key 初始即存在 时可靠；若 things[id] 是后续异步添加的，thing.value 可能为 undefined，导致 toRef(thing.value, 'name') 报错。此时应配合 watch 或 computed 做防御性处理。
关键总结
- ❌ 避免 const { name } = things.value[id] —— 彻底丢失响应性；
- ✅ 优先用 computed({ get, set }) 实现受控双向绑定，兼顾健壮性与可维护性；
- ✅ 若状态结构稳定且 ID 必然存在，toRef(thingStore.things[props.id], 'name') 也可行，但需确保 things[id] 是响应式对象（Pinia state 默认满足）；
- ? 所有修改均直接作用于 Pinia store，自动触发依赖更新，无需手动 triggerRef；
- ?️ 模板中始终使用 {{ name }} 和 v-model="name"，而非 things[id].name，才能享受解构后的简洁语法。
这样，你就能在模板中优雅地使用 name、type 等顶层变量，同时确保数据流单向清晰、响应式无损。
立即学习“前端免费学习笔记（深入）”；
