Vue：为啥计算属性在商店中声明时需要 v-model 指令中的 .value 而在组件中声明时不需要

Posted 2023-02-19

【中文标题】Vue：为啥计算属性在商店中声明时需要 v-model 指令中的 .value 而在组件中声明时不需要

【英文标题】：Vue: Why does computed property require .value in v-model directive when declared in a store but not when declared in the componentVue：为什么计算属性在商店中声明时需要 v-model 指令中的 .value 而在组件中声明时不需要

【发布时间】：2021-12-09 17:48:42

【问题描述】：

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

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

两个计算的 props 本质上是相同的实现，为什么我必须在第一个的 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,
    ;

（我正在使用计算道具，因为选择组件将出现在许多页面上，所以我想使用 setter 函数，并且我不想在每个页面上重复计算道具，所以它会进入商店。快乐在这个设置上也有 cmets）。

【参考方案1】：

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

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

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

【讨论】：

但这两种实现不应该相同吗？在我看来，Vue 在组件实现中“在幕后”做的事情，在 js 对象中实现时并没有做（即使它是反应式的）