Vue：为什么store中定义的computed在v-model中需加.value而组件内不需要？

原因解释 #

这是Vue模板对ref的自动解包规则导致的：

• 组件setup函数中直接return的ref/computed属性，Vue模板会自动解包，所以你直接写v-model="currentDepotCode"就能正常运行，不需要加.value。
• 你导出的store是普通JS对象，嵌套在普通对象内的ref/computed不会被模板自动解包，所以必须手动加.value才能访问到实际值。你store里定义的currentDepotCode本质是computed（ref类型），嵌套在store.warehouse这个普通对象下，所以模板访问时必须显式写.value。

优化方案 #

你想把公共computed逻辑收敛到store的思路是合理的，不需要每个页面重复写相同逻辑，可以用下面两种方案解决要加.value的问题：

1. 将store转为响应式对象
   导出store的时候用reactive包裹整个导出对象：

// store/index.js
export default reactive({
    state: readonly(state),
    ...methods,
    ...getters,
    currentDepotCode,
});

reactive对象内部的ref会被自动解包，之后模板里直接写v-model="store.warehouse.currentDepotCode"就可以正常使用，不需要加.value。
2. 组件内解构使用
如果不想改动现有store结构，可以在组件中把需要的computed属性从store里解构出来再return，就能享受自动解包：

setup() {
  const store = inject("store");
  const { currentDepotCode } = store.warehouse;
  return {
    currentDepotCode
  }
}

模板直接写v-model="currentDepotCode"即可。

如果项目复杂度还在上升，也可以考虑直接用官方状态管理库Pinia，Pinia的store实例天生是reactive类型，内部定义的computed属性天然支持模板直接访问不用加.value，也不需要自己维护inject/provide的逻辑，更省心。

内容的提问来源于stack exchange，提问作者Thed