vue composition API - ref变量内的计算属性

Posted 2023-03-16

【中文标题】vue composition API - ref变量内的计算属性

【英文标题】：vue composition API - computed property inside ref variable

【发布时间】：2021-12-22 14:20:10

【问题描述】：

我有以下代码：

    <template>
      <div class="row flex justify-center w-full h-full" style="min-height: 320px;>
       <q-select style="min-width: 92px;" class="w-full" outlined :options="options" label="Número de parcelas" emit-value map-options v-model="installments"></q-select>
      </div>
  </template>

    <script>
    import  useQuasar  from 'quasar'
    import  useStore  from 'vuex'
    import  defineComponent, ref, computed  from 'vue'
    
    export default defineComponent(
      name: 'PageIndex',
      components: 
        loading
      ,
    
      setup () 
        const store = useStore()
        const $q = useQuasar()
        let installments = ref(12)
        const product = computed(() => 
          return store.getters['checkout/getCheckoutProduct']
        )
        let options = ref([
          
            label: `12x de R$ $(product.value.price / 12)`,
            value: 12
          ,
          
            label: `11x de R$ $(product.value.price / 11)`,
            value: 11
          
        ])
        return 
          product,
          options,
          installments
          
      
    )
    </script>

问题是返回 UNDEFINED，甚至 product.value.price 在我的 vuex 内的 VUE devtools 中正确显示。此外，组件上的其他地方正在获得产品价值，但是......“选项”不起作用。

注意选项里面有变量，我如何将一个变量从计算传递到 ref() 变量？！

【问题讨论】：

为什么不计算变量“options”？它是根据反应属性 - 产品计算的。

你能解释一下如何将它也用作计算属性吗？！

【参考方案1】：

Ref 只会被调用一次。它在设置中使用，因此它的工作方式类似于 onCreated 钩子。您应该使用计算属性。它计算反应内容。

查看我的演示：

https://codesandbox.io/s/vue-3-vuex-4-vue-router-forked-4u0lj?file=/src/views/Home.vue

【讨论】：

在选项上使用计算属性确实可以解决问题。我习惯了旧的 vue2 方式。