Nuxt3：组合式函数内用useFetch，模板调用返回[object Promise]问题

testTest是异步函数，调用它会返回Promise对象，Vue模板无法自动解析Promise，所以直接渲染会显示[object Promise]。

方案1：在组合式函数中直接管理请求状态（推荐） #

修改useTest.ts，直接在组合式函数内发起请求，将结果存入响应式变量，避免返回异步函数：

// useTest.ts
export const useCheckout = () => {
  // 初始化响应式变量存储数据
  const element = ref(null);

  // 发起请求的函数
  const fetchData = async () => {
    const { data } = await useFetch('https://www.boredapi.com/api/activity');
    element.value = data.value;
  };

  // 可选：组件加载时自动发起请求
  // fetchData();

  return {
    element,
    fetchData
  };
};

组件中使用：

<script lang="ts" setup>
import { useAccount } from "@/stores/account";
import { menu } from "@/data/account"
import { onMounted } from 'vue';

definePageMeta({
  layout: 'checkout',
})
const account = useAccount();

const { element, fetchData } = useCheckout();

// 组件挂载时自动触发请求
onMounted(() => {
  fetchData();
});
</script>

<template>
  <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
    Data: {{ element }} 
  </div>
</template>

方案2：在组件中手动处理Promise结果 #

如果要保留异步函数的写法，在组件中通过await获取结果并存入响应式变量：

<script lang="ts" setup>
import { useAccount } from "@/stores/account";
import { menu } from "@/data/account"
import { ref, onMounted } from 'vue';

definePageMeta({
  layout: 'checkout',
})
const account = useAccount();

const { testTest } = await useCheckout();

// 响应式变量存储请求结果
const testData = ref(null);

// 组件挂载时获取数据
onMounted(async () => {
  testData.value = await testTest();
});
</script>

<template>
  <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
    Data: {{ testData }} 
  </div>
</template>

方案3：使用Suspense组件处理异步加载 #

如果需要在数据加载时显示加载状态，可通过Suspense包裹组件：

<!-- 父组件/页面中 -->
<Suspense>
  <template #default>
    <Home />
  </template>
  <template #fallback>
    <div>加载中...</div>
  </template>
</Suspense>

修改Home组件的脚本：

<script lang="ts" setup>
import { useAccount } from "@/stores/account";
import { menu } from "@/data/account"

definePageMeta({
  layout: 'checkout',
})
const account = useAccount();

const { testTest } = await useCheckout();
// 直接await获取结果
const testData = await testTest();
</script>

<template>
  <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
    Data: {{ testData }} 
  </div>
</template>

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