i have several composable file like:
File one:
export const useLoadUserData = () => {
const loadData = async () => {
// some staff
}
onMounted(async () => loadData())
}
File two:
export const useMapData = () => {
const loadData = async () => {
// some staff
}
onMounted(async () => loadData())
}
And i include all files in App.vue. How can i check that all files was loaded?
I mean in App.vue i use this file without hooks:
useLoadUserData()
useMapData()
But what if I want to add another feature after working them out like:
useLoadUserData()
useMapData()
SplashScreen.hide()
If you want to wait for the promises to be executed, you can make a change in your composable to return the function to be executed (loadData in your case) and move the onMounted from the composables directly to the component where you are using the composables.
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()
})
1