17370845950

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