Nuxt Vue3网站首屏全局加载动画实现及数据获取优化咨询

核心思路 #

通过全局预加载+根组件控制渲染实现全屏加载动画，直到所有必要API请求完成后再展示主页，避免组件单独加载或空白问题。

步骤1：全局状态管理（用Pinia，Nuxt3推荐方案） #

创建全局状态来管理加载状态和预加载的数据，方便所有组件复用：

// stores/loading.ts
import { defineStore } from 'pinia'

export const useLoadingStore = defineStore('loading', {
  state: () => ({
    isLoading: true,
    preloadedData: {
      books: [] // 根据你的数据结构定义初始值
    }
  }),
  actions: {
    async fetchAllRequiredData() {
      try {
        // 并行请求所有需要预加载的API，减少总耗时
        const booksData = await useAPIFetch('/api/books')
        // 如有其他需要预加载的API，用Promise.all并行执行：
        // const [booksData, otherData] = await Promise.all([useAPIFetch('/api/books'), useAPIFetch('/api/other')])
        
        this.preloadedData.books = booksData
        // this.preloadedData.other = otherData
      } catch (err) {
        console.error('预加载数据失败:', err)
        // 可添加错误提示逻辑，比如显示错误页面
      } finally {
        this.isLoading = false // 无论成功失败都关闭加载动画
      }
    }
  }
})

步骤2：根组件（App.vue）控制加载逻辑 #

在Nuxt的根组件中初始化数据请求，优先于页面组件执行，确保加载动画先显示：

<template>
  <!-- 全屏加载动画 -->
  <div v-if="loadingStore.isLoading" class="fullscreen-loader">
    <div class="loader-wrapper">
      <img src="/your-logo.png" alt="站点Logo" class="loader-logo">
      <div class="spinner"></div>
    </div>
  </div>
  <!-- 加载完成后显示主页 -->
  <NuxtPage v-else />
</template>

<script setup lang="ts">
const loadingStore = useLoadingStore()
// 顶层await会在组件渲染前执行，比onMounted更早启动请求
await loadingStore.fetchAllRequiredData()
</script>

<style scoped>
.fullscreen-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff; /* 匹配你的站点背景色 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loader-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.loader-logo {
  width: 80px; /* 根据你的Logo尺寸调整 */
  height: auto;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e0e0e0;
  border-top-color: #2563eb; /* 匹配你的站点主色调 */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

步骤3：滚动组件复用预加载数据 #

页面组件直接从全局状态取数据，无需单独发起请求：

<!-- 滚动组件示例 -->
<template>
  <div class="book-list">
    <div v-for="book in books" :key="book.id" class="book-item">
      {{ book.title }}
    </div>
  </div>
</template>

<script setup lang="ts">
const loadingStore = useLoadingStore()
const books = computed(() => loadingStore.preloadedData.books)
</script>

关键优化点说明 #

1. 为什么不用onMounted？
   onMounted是组件挂载后才执行，而App.vue的顶层await会在页面渲染前就启动API请求，更早开始加载数据，能有效提升加载速度。

2. NuxtLoadingIndicator为什么没用？
   它默认是路由切换时的加载提示，不适合初始页面的全屏预加载场景，自定义全屏加载更符合你的需求。

3. 并行请求提升速度
   用Promise.all并行处理多个API请求，避免串行请求的等待时间叠加，大幅减少总加载时长。

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