События жизненного цикла Vue.js и с чего начать загрузку свойств магазина (Vue.observable)

Question

Я использую Vue.observable () для управления состоянием и мне нужно дождаться заполнения двух свойств магазина, прежде чем vue-router загружает большинство представлений.

Попытался поместить загрузку в события beforeCreate, создал и смонтировал жизненный цикл в App.vue, поскольку он является корнем моего веб-приложения:

<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>

Но vue-router загружает другие представления, которые зависят от этих свойств состояния, прежде чем обещания смогут разрешиться. Все мои представления зависят от заполняемых свойств, поэтому перемещение return await Promise.all([ mutations.clientSet(), mutations.productsSet()]); в их обработчики событий жизненного цикла не очень эффективно.

Есть ли лучшее место для запуска этого кода, чтобы он гарантированно завершился до того, как vue-router загрузит представления?

Answer 1

Я изменил свой магазин для каждого из двух свойств, чтобы изменить их на обещания (вместо результата).Везде, где мне нужны были значения в представлениях, теперь я жду их значений.

Это позволяет пользовательскому интерфейсу загружаться быстро и ждать только при необходимости.