如何检测多个Vue组合式函数加载完成并执行后续操作？

方案一：让组合式函数返回加载完成的Promise #

修改每个组合式函数，将内部加载逻辑包装为Promise并返回，这样就能在App.vue中通过Promise.all等待所有加载任务完成。

修改组合式函数 #

// 文件一：useLoadUserData.js
import { onMounted } from 'vue'
export const useLoadUserData = () => {
  const loadData = async () => {
    // 你的加载逻辑（比如接口请求、数据初始化等）
  }

  // 创建Promise，在onMounted执行完loadData后resolve
  const loadComplete = new Promise(async (resolve) => {
    onMounted(async () => {
      await loadData()
      resolve()
    })
  })

  return { loadComplete }
}

// 文件二：useMapData.js
import { onMounted } from 'vue'
export const useMapData = () => {
  const loadData = async () => {
    // 你的加载逻辑
  }

  const loadComplete = new Promise(async (resolve) => {
    onMounted(async () => {
      await loadData()
      resolve()
    })
  })

  return { loadComplete }
}

在App.vue中等待所有加载完成 #

import { useLoadUserData } from './path/to/useLoadUserData'
import { useMapData } from './path/to/useMapData'
import { onMounted } from 'vue'
import { SplashScreen } from '你的依赖包'

onMounted(async () => {
  const { loadComplete: userDataLoaded } = useLoadUserData()
  const { loadComplete: mapDataLoaded } = useMapData()

  // 等待所有加载操作完成
  await Promise.all([userDataLoaded, mapDataLoaded])
  
  // 执行后续操作
  SplashScreen.hide()
})

方案二：通过状态ref跟踪加载完成情况 #

如果需要单独监控每个加载任务的状态，可以让组合式函数返回表示加载完成的ref，再在App.vue中监听所有状态达成的时机。

修改组合式函数 #

// 文件一：useLoadUserData.js
import { ref, onMounted } from 'vue'
export const useLoadUserData = () => {
  const isUserDataLoaded = ref(false)
  const loadData = async () => {
    // 你的加载逻辑
    isUserDataLoaded.value = true
  }

  onMounted(async () => {
    await loadData()
  })

  return { isUserDataLoaded }
}

// 文件二：useMapData.js
import { ref, onMounted } from 'vue'
export const useMapData = () => {
  const isMapDataLoaded = ref(false)
  const loadData = async () => {
    // 你的加载逻辑
    isMapDataLoaded.value = true
  }

  onMounted(async () => {
    await loadData()
  })

  return { isMapDataLoaded }
}

在App.vue中监听状态 #

import { useLoadUserData } from './path/to/useLoadUserData'
import { useMapData } from './path/to/useMapData'
import { watch, computed } from 'vue'
import { SplashScreen } from '你的依赖包'

const { isUserDataLoaded } = useLoadUserData()
const { isMapDataLoaded } = useMapData()

// 计算所有加载是否完成
const allLoaded = computed(() => isUserDataLoaded.value && isMapDataLoaded.value)

// 监听状态变化，完成后执行操作
watch(allLoaded, (isAllLoaded) => {
  if (isAllLoaded) {
    SplashScreen.hide()
  }
}, { immediate: true }) // 初始化时立即检查一次状态

额外提示 #

• 如果加载逻辑可能抛出错误，建议在loadData中加入try/catch处理；若需要等待所有任务完成（无论成功失败），可以用Promise.allSettled替代Promise.all。
• 确保组合式函数中的onMounted不会重复执行，在单实例的App.vue中调用是安全的，多组件场景需注意避免重复初始化。

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