To give some context, I've a vuejs application using vue-router and vuex.

• app.vue Bootstrap code
• foo.vue Some ponent that renders on route /foo
• bar.vue Some ponent that renders on route /bar

When the application starts I need to sync the state reading from device storage. Since this is an async operation it's wrapped on a vue-action and called on app.vue.

When entering the /foo route by the time the ponent is mounted the $store is not yet update from the device storage

How can all ponents ensure the initialisation is made before they are mounted?

To give some context, I've a vuejs application using vue-router and vuex.

• app.vue Bootstrap code
• foo.vue Some ponent that renders on route /foo
• bar.vue Some ponent that renders on route /bar

When the application starts I need to sync the state reading from device storage. Since this is an async operation it's wrapped on a vue-action and called on app.vue.

When entering the /foo route by the time the ponent is mounted the $store is not yet update from the device storage

How can all ponents ensure the initialisation is made before they are mounted?

• javascript
• vue.js
• vue-ponent
• vue-router

1 Answer 1

What I do in these situations is use a v-if on your root <router-view> element to render only when the data you expect to be there has populated, e.g.

<script>
  export default {
    puted: {
      hasLoadedData() {
        // Or whatever criteria you decide on to represent that the
        // app state has finished loading.
        return this.$store.state.something !== null;
      }
    }
  }
</script>

<template>
  <div id="app">
    <router-view v-if="hasLoadedData" />
    <p v-else>Loading...</p>
  </div>
</template>