Как убедиться, что справочные данные загружаются в Vue?

Question

У меня есть настройка веб-пакета для объединения всех исходных текстов. У меня есть объект Vue, который является страницей, и несколько компонентов Vue моего собственного создания. Это прекрасно работает!

Теперь я получаю справочные данные из базы данных, чтобы заполнить определенные параметры по умолчанию для некоторых из этих компонентов. На моих страницах Mounted или Created события (нет разницы по моему вопросу) я вызываю метод, который проверит, существуют ли данные в localStorage, и если нет, он извлечет данные из базы данных. .

После извлечения у меня это в localStorage, так что это не проблема. Тем не менее, в первый раз мне нужно собрать данные (или когда мне нужно обновить их, потому что у меня есть другой триггер, который сообщает мне, когда он изменился), страница и компоненты визуализировались (с ошибками из-за недостатка данных) до данные возвращаются. Метод fetch находится в обещании, но mounted событиям, кажется, не важно, существует ли обещание внутри, прежде чем оно перейдет к следующему компоненту.

Так, что является лучшим методом для загрузки / обновления справочных данных в Vue? В настоящее время я не использую VueX, потому что это не SPA. Конечно, это одна страница, которая делает что-то (есть много отдельных страниц, которые делают свое дело на этом сайте), но мне не нужно делать его полным SPA здесь. Но если VueX и его store дадут мне какую-то гарантию того, что это произойдет первым или страница / компоненты будут запускаться ПОСЛЕ вещей VueX, я изучу это.

Answer 1

Вы пытались это сделать:

<component v-if="page.isDataLoaded">...</component>

в вашем Vue-компоненте:

data() {
   return {
      page: {
         isDataLoaded: false,
      }
   }
},
mounted() {
   this.fetchPageData().then(() => this.page.isDataLoaded = true);
}

Вы можете использовать v-if и v-else для отображения, например, элемента загрузчика страницы, например:

<PageLoader v-if="!page.isDataLoaded"></PageLoader>
<component v-else>...</component>