vue 组合 API - 在 ref 变量中计算 属性

Question

我有以下代码：

    <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>

问题是返回未定义，甚至 product.value.price 在我的 vuex 中的 VUE devtools 中正确显示。此外，组件上的其他地方正在获取产品价值，但是...... 'options' 不起作用。

请注意，选项中包含变量，我如何将变量从 computed 传递到 ref() 变量？！

Answer 1

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

查看我的演示：

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