Vue3 Composition API中computed值传入ref变量返回undefined如何解决

问题原因 #

你在初始化ref类型的options时，计算逻辑只会在setup执行阶段运行一次。此时Vuex中存储的product数据大概率还未加载完成，product.value是undefined，自然读取不到price属性。且ref本身不会自动跟踪内部依赖的响应式变量更新，后续product加载完成后，options也不会自动重新计算赋值，就会一直是初始的错误值。

解决方案 #

优先推荐把options也改为computed属性，天然响应式跟踪product的变化自动更新，代码改动最小：

<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']
    })
    // 把原来的ref定义options改为computed
    const options = computed(() => {
      // 加非空判断避免product未加载时报错
      if (!product.value?.price) return []
      return [
        {
          // 加toFixed保留两位小数，符合金额展示规范
          label: `12x de R$ ${(product.value.price / 12).toFixed(2)}`,
          value: 12
        },
        {
          label: `11x de R$ ${(product.value.price / 11).toFixed(2)}`,
          value: 11
        }
      ]
    })
    return {
      product,
      options,
      installments
      }
  }
})
</script>

如果后续你需要手动修改options的内容（比如动态增删选项），必须用ref存储的话，可以用watch监听product变化后重新赋值：

const options = ref([])
// 监听product变化，immediate设为true保证初始化时如果product已有值就立刻执行
watch(product, (newProduct) => {
  if (!newProduct?.price) return
  options.value = [
    {
      label: `12x de R$ ${(newProduct.price / 12).toFixed(2)}`,
      value: 12
    },
    {
      label: `11x de R$ ${(newProduct.price / 11).toFixed(2)}`,
      value: 11
    }
  ]
}, { immediate: true })

内容的提问来源于stack exchange，提问作者eeerrrttt