vue3 defineProps 默认值如何设置一个异步值？

Question

<script lang="ts" setup>
import {  withDefaults } from 'vue'
import {  globalDada } from '@/data/index'

interface Props {
  text?: string; // cta文字
}

const props = withDefaults(defineProps<Props>(), {
  text: globalDada.a==2?'立即安装':'查看详情'
})

如上代码，我想给传入的属性 text 设置的默认值依赖 全局变量 globalDada.a，可是这个全局变量是初始化的时候请求接口返回的，这里初始化 props 的时候全局变量还没拿到值，则始终走三元判断的后面的逻辑，如何可以在设置 props 默认值中能拿到异步获取的数据？

Answer 1

你不能直接改 props 的值，因为 props 是只读的,用一个变量来处理

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import { globalData } from 'vue'

interface Props {
  text?: string; // cta文字
}

const props = defineProps<Props>()


const localText = ref(props.text !== undefined ? props.text : (globalData.a == 2 ? '立即安装' : '查看详情'))

watchEffect(() => {
  
  if (props.text === undefined) {
    localText.value = globalData.a == 2 ? '立即安装' : '查看详情'
  }
})
</script>