在 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 结构）：
<script setup>
import { computed } from 'vue'
import { useThingsStore } from '@/stores/things-store'
const props = defineProps({
id: { type: String, required: true }
})
const thingStore = useThingsStore()
// ✅ 双向 computed：安全解构 name
const name = computed({
get() {
return thingStore.things[props.id]?.name ?? ''
},
set(value) {
if (thingStore.things[props.id]) {
thingStore.things[props.id].name = value
}
}
})
// ✅ 同理处理 type
const type = computed({
get() {
return thingStore.things[props.id]?.type ?? ''
},
set(value) {
if (thingStore.things[props.id]) {
thingStore.things[props.id].type = value
}
}
})
// ✅ 保留原 store 方法
const { removeThing } = thingStore
</script>
<template>
<fieldset>
<legend>{{ name || id }}</legend>
<label>
Name:
<input v-model="name" />
</label>
<label>
Type:
<input v-model="type" />
</label>
<button type="button" @click="removeThing(id)">×</button>
</fieldset>
</template>? 关键说明：
立即学习“前端免费学习笔记（深入）”；
- 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，真正实现「解构即响应」。
