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

【问题标题】：vue composition API - computed property inside ref variablevue composition API - ref变量内的计算属性
【发布时间】：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”？它是根据反应属性 - 产品计算的。
你能解释一下如何将它也用作计算属性吗？！

标签： vue.js vuex vuejs3 quasar-framework vue-composition-api

【解决方案1】：

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

查看我的演示：

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

【讨论】：

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