Vue.js 生命周期事件以及从哪里开始加载商店属性 (Vue.observable)答案

【问题标题】：Vue.js lifecycle events and where to start loading store properties (Vue.observable)Vue.js 生命周期事件以及从哪里开始加载商店属性 (Vue.observable)
【发布时间】：2019-09-30 17:00:16
【问题描述】：

我正在使用 Vue.observable() 来管理状态，并且需要等待两个 store 属性被填充，然后大多数视图被 vue-router 加载。

尝试将加载放在 App.vue 中的 beforeCreate、created 和 mount 生命周期事件中，因为它是我的 web 应用程序的根：

<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 会在 promise 有机会解决之前加载依赖于这些状态属性的其他视图。我所有的视图都依赖于被填充的属性，因此将return await Promise.all([ mutations.clientSet(), mutations.productsSet()]); 移动到它们的生命周期事件处理程序不是很有效。

有没有更好的地方来运行这段代码，以保证在 vue-router 加载视图之前完成？

【问题讨论】：

标签： typescript vue.js vuejs2 observable vue-router

【解决方案1】：

我为这两个属性中的每一个都修改了我的商店，以将它们更改为承诺（而不是结果）。任何我需要视图中的值的地方，我现在都在等待这些值。

这允许 UI 快速加载并且只在需要的地方等待。

【讨论】：