Vue:如何在组件初始化过程中等待承诺？

Question

我有几个Vue组件(由Webpack和Vue Loader作为.vue文件处理实现)需要同步(即显示/允许视频流的交互)。其中有些需要一些初始化工作(即下载元数据或图像)。

我能否以某种方式延迟组件，直到初始化就绪？如果我能等待在像beforeCreate这样的生命周期钩子中实现承诺的话，那么完美就是了。

我知道异步组件，但据我所知，我所能做的就是延迟加载该组件，而且我仍然可以等待某个初始化。

Answer 1

你可以在路线层面上这样做。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        doSomeRequests()
         .then(() => (next()))
      }
    }
  ]
})

doSomeRequests是一个执行异步代码的函数。当异步代码完成后，您将调用next()以允许vue路由器进入与url对应的组件。在示例中，组件Foo

我的建议是在组件中显示一个加载程序。

<template>
  <!-- code  -->
    <LoaderComponent :loading="loading" />
  <!-- code  -->
</template>

剧本部分：

<script>
 export default {
   // code
   data: () => ({
    loading: false
   }),

   created () {
     this.loading = true
     doSomeRequests()
      .then(<!-- code  -->)
      .finally(() => (this.loading = false))
   }
 }
</script>