javascript - Vue : Why does computed property require . 在商店中声明时 v-model 指令中的值，但在组件中声明时不存在

Question

当我将一个计算属性从我的组件移动到商店时，我必须在 v-model 指令中使用 .value。

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

两个计算 Prop 本质上是相同的实现，为什么我必须在第一个的 v-model 指令中使用 .value？

    <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,
    };

(我正在使用计算 Prop ，因为选择组件会出现在许多页面上，所以我想使用设置函数，我不想在每个页面上重复计算 Prop ，所以它进入商店。快乐对此设置也有意见)。

Answer 1

我认为因为 q-select options 是一个对象数组，store.warehouse.getDepotSelectList()每个元素的真正值(value)

例如:[{ key: 1, value: 'first' }, { key: 2, value: 'second' }]

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