Vue: Как мне ждать Promise в процессе инициализации компонента?

Question

У меня есть несколько компонентов Vue (реализованных в виде .vue файловых процессов Webpack и Vue Loader), которые необходимо синхронизировать (т. Е. Отображать / разрешать взаимодействие видеопотока). Некоторые из них требуют некоторой инициализации (т.е. загрузки метаданных или изображений).

Можно ли как-то задержать компонент до тех пор, пока инициализация не будет готова? Идеально было бы, если бы я мог ждать выполнения Обещания в хуке жизненного цикла, например 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>