在 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（推荐，语义清晰、控制力强）
<script setup>
import { computed } from 'vue'
import { useThingsStore } from '@/stores/things-store'
const props = defineProps({ id: { type: String, required: true } })
const thingStore = useThingsStore()
// 双向计算属性：自动读取/写入 store.things[id].name
const name = computed({
get() {
return thingStore.things[props.id]?.name ?? ''
},
set(value) {
if (thingStore.things[props.id]) {
thingStore.things[props.id].name = value
}
}
})
const type = computed({
get() {
return thingStore.things[props.id]?.type ?? ''
},
set(value) {
if (thingStore.things[props.id]) {
thingStore.things[props.id].type = value
}
}
})
</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="thingStore.removeThing(id)">×</button>
</fieldset>
</template>✅ 优势：显式控制读写逻辑，可安全处理 id 不存在的情况（?. 和空值 fallback），且完全保持响应性。
方案二：使用 toRef（简洁，适用于已确认 ID 存在的场景）
<script setup>
import { toRef } from 'vue'
import { useThingsStore } from '@/stores/things-store'
const props = defineProps({ id: { type: String, required: true } })
const thingStore = useThingsStore()
// 动态创建对嵌套属性的响应式引用（需确保 things[id] 已存在）
const thing = toRef(thingStore.things, props.id)
const name = toRef(thing.value, 'name')
const type = toRef(thing.value, 'type')
</script>⚠️ 注意：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 等顶层变量，同时确保数据流单向清晰、响应式无损。
立即学习“前端免费学习笔记（深入）”；
