Vue.js Pinia 中解构嵌套对象并保持响应式的最佳实践

在 vue 3 + pinia 项目中，直接解构 store 中嵌套对象（如 `things[id]`）会导致响应性丢失；需借助 `computed` 的双向 getter/setter 或 `toref` 动态创建响应式引用，才能安全地将深层属性暴露为独立响应式变量。

要在组件中将 things[id] 的 name 和 type 提升为顶层响应式变量（如 ），不能使用 toRefs(things[id])——因为 things[id] 本身不是响应式对象的直接属性（things 是一个普通对象，其 key 是动态数字字符串），toRefs 仅对 reactive 对象或 ref 的 .value 的顶层自有属性有效，对动态键访问结果无效。

✅ 正确方案是：使用 computed 配合显式 getter/setter，精准代理对 store.things[id] 属性的读写，并确保触发依赖追踪与更新通知：

? 关键说明：

• 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)，逻辑更清晰、可维护性更强。