Vue技术问题：如何检测所有组件完成加载状态？

针对你的需求，不用逐个手动检查组件，我们可以通过全局状态管理+请求拦截/通用钩子的方式统一控制加载图标的显示与隐藏，下面是具体实现方案：

核心思路 #

维护一个全局的「活跃加载任务计数器」：

• 每当组件开始异步操作（数据请求、组件懒加载初始化）时，计数器+1
• 异步操作完成（成功/失败）时，计数器-1
• 当计数器归0时，说明所有加载任务完成，隐藏加载图标

具体实现（基于Nuxt 3 + Pinia） #

1. 创建全局加载状态仓库 #

用Pinia创建全局状态，管理加载计数器：

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

export const useLoadingStore = defineStore('loading', {
  state: () => ({
    activeTasks: 0 // 活跃加载任务数
  }),
  actions: {
    // 开始加载
    start() {
      this.activeTasks++
    },
    // 结束加载
    end() {
      if (this.activeTasks > 0) {
        this.activeTasks--
      }
    }
  },
  getters: {
    // 判断是否处于加载中
    isLoading: (state) => state.activeTasks > 0
  }
})

2. 全局拦截所有异步请求 #

如果组件数据都是通过$fetch获取的，写一个Nuxt插件拦截所有请求，自动更新计数器：

// plugins/loadingInterceptor.js
import { useLoadingStore } from '~/stores/loading'

export default defineNuxtPlugin(() => {
  const loadingStore = useLoadingStore()
  const originalFetch = $fetch

  // 重写$fetch，自动包裹加载计数逻辑
  $fetch = async (...args) => {
    loadingStore.start()
    try {
      return await originalFetch(...args)
    } finally {
      // 无论请求成功/失败，都结束计数
      loadingStore.end()
    }
  }
})

3. 修改布局组件，绑定加载状态 #

在根布局里，监听全局加载状态控制LoadingBar的显示：

<!-- layouts/default.vue -->
<template>
  <LoadingBar :loadingBar="isLoading" />
  <NuxtLayout name="root">       
      <slot />       
  </NuxtLayout>
</template>

<script setup>
import { useLoadingStore } from '~/stores/loading'
import { computed } from 'vue'

const loadingStore = useLoadingStore()
// 计算属性监听加载状态
const isLoading = computed(() => loadingStore.isLoading)
</script>

4. 处理组件自身的异步任务（非请求类） #

如果组件里有非请求的异步操作（比如本地数据处理、定时器），封装通用钩子包裹：

// composables/useTaskLoader.js
import { useLoadingStore } from '~/stores/loading'

export const useTaskLoader = () => {
  const loadingStore = useLoadingStore()

  // 包裹异步任务的方法
  const wrapTask = async (taskFn) => {
    loadingStore.start()
    try {
      return await taskFn()
    } finally {
      loadingStore.end()
    }
  }

  return { wrapTask }
}

在组件里使用：

<!-- components/LazyComponent1.vue -->
<script setup>
const { wrapTask } = useTaskLoader()

const processLocalData = async () => {
  // 模拟本地异步处理
  await new Promise(resolve => setTimeout(resolve, 1000))
  // 处理数据逻辑
}

onMounted(async () => {
  await wrapTask(processLocalData)
})
</script>

额外说明 #

• 如果懒加载组件本身没有异步数据，只是组件加载耗时，可以在组件onMounted钩子中调用loadingStore.end()（同时在组件懒加载开始时调用start，可通过Nuxt的lazy组件加载钩子实现）
• 这个方案不需要修改每个组件的加载逻辑，请求类操作自动被拦截，非请求异步任务只需用通用钩子包裹即可，实现全局统一管理

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