Nuxt.js中如何在API数据获取完成后渲染index.vue页面？

针对你的需求，有几种实用的方式可以确保index.vue在API数据获取完成后再渲染：

1. 利用Nuxt异步插件的阻塞特性 #

你的插件是async函数，Nuxt 3默认会等待所有异步插件执行完成后才开始渲染页面。也就是说，只要你的插件没有报错，index.vue在渲染时store.data已经是获取完成的状态了。

如果发现页面还是提前渲染了，检查以下几点：

• 确认fetchApi.ts在nuxt.config.ts的plugins数组中正确注册（如果是自动导入的话，确保文件在plugins目录下）
• 查看控制台是否有API请求的错误，导致store.data未被正确赋值

2. 手动监听Store状态，控制页面渲染 #

如果需要更灵活的控制（比如自定义加载状态），可以在Store中添加一个加载状态标识，结合页面的条件渲染或Suspense组件实现：

第一步：更新插件和Store #

在插件中添加加载状态的更新逻辑，同时确保Store中定义了isLoading和data状态：

// plugins/fetchApi.ts
export default defineNuxtPlugin(async () => {
  const store = useStore();
  store.isLoading = true; // 标记开始加载
  try {
    const apiData: any = await $fetch('https://test-api.com');
    store.data = apiData;
  } catch (err) {
    console.error('API请求失败:', err);
  } finally {
    store.isLoading = false; // 加载完成（无论成功失败）
  }
})

第二步：在index.vue中控制渲染 #

方式一：使用v-if条件渲染

<template>
  <!-- 数据就绪时渲染页面内容 -->
  <main v-if="!isLoading && pageData">
    <!-- 这里写你的页面内容，比如 {{ pageData.someField }} -->
  </main>
  <!-- 加载中提示 -->
  <div v-else class="loading">
    加载中...
  </div>
</template>

<script setup>
const store = useStore();
// 解构Store的响应式状态
const { isLoading, data: pageData } = storeToRefs(store);
</script>

方式二：使用Suspense组件

Nuxt的Suspense组件可以等待异步操作完成后再渲染内容，适合需要统一处理加载状态的场景：

<template>
  <Suspense>
    <template #default>
      <!-- 数据就绪后的页面内容 -->
      <main>{{ pageData.someField }}</main>
    </template>
    <template #fallback>
      <!-- 加载中占位 -->
      <div class="loading">加载中...</div>
    </template>
  </Suspense>
</template>

<script setup>
const store = useStore();
const { isLoading, data: pageData } = storeToRefs(store);

// 等待数据加载完成
await new Promise(resolve => {
  if (!isLoading.value) resolve(true);
  const unwatch = watch(isLoading, (val) => {
    if (!val) {
      unwatch();
      resolve(true);
    }
  });
});
</script>

3. 直接在页面中依赖Store数据 #

如果你的页面内容完全依赖Store中的API数据，也可以通过computed直接获取数据，Nuxt的响应式系统会自动等待数据就绪后更新页面：

<template>
  <main v-if="pageData">
    {{ pageData.title }}
  </main>
</template>

<script setup>
const store = useStore();
const pageData = computed(() => store.data?.indexPage); // 假设API返回的数据包含indexPage字段
</script>

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