Vue:为什么在存储中声明computed属性时需要在v-model指令中使用.value，而在组件中声明时却不需要.&

Question

当我将计算道具从组件移动到存储库时，我必须在v-model指令中使用.value。

下面的两个类星体选择列表都在工作。它们都显示来自存储库的状态，第一个从存储库中的计算属性访问状态，第二个从组件中的计算属性访问状态。

两个计算道具本质上是相同的实现，为什么我必须使用.value在第一个的v型指令?

<q-select
outlined
v-model="store.warehouse.currentDepotCode.value" 
:options="store.warehouse.getDepotSelectList()"
emit-value
map-options
label="Select a Depot"
class="q-ma-md"
/>

<q-select
outlined
v-model="currentDepotCode" 
:options="store.warehouse.getDepotSelectList()"
emit-value
map-options
label="Select a Depot"
class="q-ma-md"
/>
setup() {
const store = inject("store");
const currentDepotCode = computed({
get(){
return store.warehouse.state.currentDepot;
},
set(depotCode){
store.warehouse.setCurrentDepot(depotCode);
}
});

return {
store,
currentDepotCode,  
};

存储/index.js

const state = reactive({
depots,
currentDepot: 'VIC',
});
const currentDepotCode = computed({
get(){
return state.currentDepot;
},
set(depotCode){
state.currentDepot = depotCode;
}
});
export default {
state: readonly(state),
...methods,
...getters,
currentDepotCode,
};

(我正在使用一个计算的道具，因为选择组件将出现在许多页面上，所以我想使用setter函数，我不想在每个页面上重复计算的道具，所以它在存储中。很高兴有人对这个设置发表评论)

Answer 1

我认为因为q-select选项是一个对象数组，store.warehouse.getDepotSelectList()每个元素的实际值

交货:[{ key: 1, value: 'first' }, { key: 2, value: 'second' }]

因为在文档中它直接使用了valuehttps://quasar.dev/vue-components/select