17370845950

在 vue 3 + pinia 项目中，直接解构 `store.state[id]` 的属性会导致丢失响应性；需借助 `computed` 双向计算属性（get/set）桥接深层嵌套状态，才能安全地在模板中使用 `v-model="name"` 等简洁语法。

要在组件中将嵌套于 Pinia store 中的对象（如 things[id]）解构为独立的响应式变量（如 name、type），不能使用 toRef(things.value[id], 'name') 或 toRefs(things.value[id]) —— 因为 things.value[id] 是一个普通对象（非 reactive proxy），其属性不具备响应式追踪能力，toRef 对非 reactive 对象的属性无效，导致后续修改无法触发视图更新。

✅ 正确做法是：使用 computed 定义双向计算属性，显式声明 get（读取 store 中对应字段）和 set（写回 store），从而在保持响应式链路完整的同时，获得简洁的模板绑定体验。

以下是推荐实现（适配你的 things-store 结构）：

? 关键说明：

• thingStore.things 应为 ref 或 reactive 包裹的对象（Pinia 默认 state 是 reactive，因此 thingStore.things 是响应式对象）；
• computed 的 get 实时读取 thingStore.things[props.id].name，自动建立依赖追踪；
• set 直接修改 store 中原始属性，触发 Pinia 状态变更与视图更新；
• 使用可选链 ?. 和空值合并 ?? 避免 id 不存在时的报错，提升健壮性。

⚠️ 注意事项：

• ❌ 不要尝试 const { name, type } = toRefs(things.value[props.id]) —— things.value[props.id] 是 plain object，toRefs 对其无效；
• ❌ 避免在 setup 中直接 const thing = things.value[props.id] 后解构，这会切断响应式连接；
• ✅ 若需解构多个字段且逻辑复杂，可封装为组合函数（如 useThingById(id)），内部统一管理 computed 逻辑，提升复用性。

通过 computed 双向绑定，你既能享受模板中 v-model="name" 的简洁性，又能确保所有变更准确同步至 Pinia store，真正实现「解构即响应」。