How to make child route component wait for main component to be mounted

Ionic Framework Ionic Vue
1

I want to make sure every time the app loads the tabs component some async data is fetched and stored in vuex, then when the tab itself is mounted I want to make sure the data is there.

Basically, I want to make sure that when /tabs/profile is loaded, /tabs/ was executed and data was loaded

2

you can use the lifecycle events

3

I have a beforeCreate async function like this:

  beforeCreate: async function () {
    const store = useStore()
    const company = store.getters.company
    if (!company) {
      //need to load main data
      const data = await load()
      console.log('setting company to ', data[0])
      await store.dispatch('setCompany', data[0])
    }
  },

However, even though Tabs mounted lifecycle method gets executed when the async beforeCreate function was resolved… ProfileTab which is a children route of /tabs/ gets executing without waiting for the parent route to be resolved… (on ProfileTab I was waiting for company on the store, but as is executed before Tabs was mounted, it was null

Tabs.vue?36e0:62 created tab component
ProfileTab.vue?dafe:147 setting up child tab component
ProfileTab.vue?dafe:148 company----> null
ProfileTab.vue?dafe:137 created child tab component
ProfileTab.vue?dafe:140 mounted child tab component
Tabs.vue?36e0:80 mounted tab component
4

in your state, you should have a flag set to indicate that you are still loading data, on all of the pages that you don’t want to render, check the flag before rendering.