Currently, I am utilizing Vue.observable() for state management and it is crucial for two store properties to be fully loaded before most views are rendered by vue-router.
I have attempted implementing the loading logic in various lifecycle events such as beforeCreate, created, and mounted within App.vue since it serves as the root component of my web application:
<template lang='pug'>
#app
AppHeader
router-view
AppFooter
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import AppHeader from '@/components/AppHeader.vue'; // @ is an alias to /src
import AppFooter from '@/components/AppFooter.vue';
import { mutations } from '@/store';
@Component({
components: {
AppHeader, AppFooter
}
})
export default class App extends Vue {
private async beforeCreate(): Promise<[void, void]> {
return await Promise.all([ mutations.clientSet(), mutations.productsSet()]);
}
}
</script>
Despite my efforts, the vue-router continues to load other views that rely on these store properties prior to the completion of the promises. Given that all views require these properties, placing
return await Promise.all([ mutations.clientSet(), mutations.productsSet()]);Is there a more suitable location to execute this code to ensure it finishes processing before the vue-router renders the views?