使用多个可组合文件检查数据加载时间

Question

我有几个可组合文件，例如： 文件一：

export const useLoadUserData = () => {
  const loadData = async () => {
    // some staff
  }
  onMounted(async () => loadData())
}

文件二：

export const useMapData = () => {
  const loadData = async () => {
    // some staff
  }
  onMounted(async () => loadData())
}

我将所有文件包含在 App.vue 中。我如何检查所有文件是否已加载？

我的意思是在 App.vue 中我使用这个文件而不使用钩子：

useLoadUserData()
useMapData()

但是如果我想在解决之后添加另一个功能，例如：

useLoadUserData()
useMapData()
SplashScreen.hide()

Answer 1

如果您想等待执行承诺，您可以在可组合项中进行更改以返回要执行的函数（在您的情况下为 loadData），并将 onMounted 从可组合项直接移动到您正在使用的组件可组合项。

Composable example:

export const useLoadUserData = () => {
  const loadData = async () => {
    // await yourStuff()
  }
  return { loadData }
}


Component example:

import { useLoadUserData } from "./useLoadUserData";
import { useMapData } from "./useMapper";
import { SplashScreen } from "./splashscreen";
import {ref, onMounted} from 'vue'

const { loadData: loadUserData } = useLoadUserData()
const { loadData: mapData } = useMapData()

onMounted(async () => {
  await Promise.all([ loadUserData(), mapData()])
  SplashScreen().hide()
})