在 vue 3 + pinia 项目中，直接解构 store 中嵌套对象（如 `things[id]`）会导致响应性丢失；需借助 `computed` 的双向 getter/setter 或 `toref` 动态创建响应式引用，才能安全地将深层属性暴露为独立响应式变量。
要在组件中将 things[id] 的 name 和 type 提升为顶层响应式变量（如 <input v-model="name">），不能使用 toRefs(things[id])——因为 things[id] 本身不是响应式对象的直接属性（things 是一个普通对象，其 key 是动态数字字符串），toRefs 仅对 reactive 对象或 ref 的 .value 的顶层自有属性有效，对动态键访问结果无效。
✅ 正确方案是：使用 computed 配合显式 getter/setter，精准代理对 store.things[id] 属性的读写，并确保触发依赖追踪与更新通知：
<script setup>
import { computed } from 'vue'
import { useThingsStore } from '@/stores/things-store'
const props = defineProps({
id: { type: String, required: true }
})
const thingStore = useThingsStore()
// 双向计算属性：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
}
}
})
// 保持原有方法解构
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>? 关键说明：
- computed({ get, set }) 确保每次访问 name/type 都触发 thingStore.things[props.id] 的响应式依赖收集；
- ?. 可选链和 ?? '' 提供健壮性，避免 id 不存在时崩溃；
- set 中显式校验 thingStore.things[props.id] 存在，防止误写入 undefined；
- 所有变更仍作用于原始 store 数据，保证状态单一来源（Single Source of Truth）。
⚠️ 不推荐的替代尝试：
立即学习“前端免费学习笔记（深入）”；
- ❌ toRef(things, id)：things 是普通对象，非 reactive，toRef 无法建立响应式连接；
- ❌ ref(things[id])：创建的是静态快照，后续 things[id] 更新不会同步；
- ❌ watch(() => things[id], ...)：仅监听变化，无法实现 v-model 所需的双向绑定。
? 进阶提示：若需频繁解构多个字段，可封装为组合函数提升复用性：
// composables/useThingById.js
import { computed } from 'vue'
import { useThingsStore } from '@/stores/things-store'
export function useThingById(id) {
const store = useThingsStore()
return {
name: computed({
get() { return store.things[id]?.name ?? '' },
set(v) { if (store.things[id]) store.things[id].name = v }
}),
type: computed({
get() { return store.things[id]?.type ?? '' },
set(v) { if (store.things[id]) store.things[id].type = v }
})
}
}如此，组件内只需 const { name, type } = useThingById(props.id)，逻辑更清晰、可维护性更强。
