Question

我有webpack设置来捆绑所有源。我有一个Vue对象，它是我自己创建的页面和多个Vue组件。这很棒！

我现在正在从数据库中获取参考数据，以为其中的某些组件填写某些默认选项。在我的页面Mounted或Created事件中（我的问题没有区别），我正在调用一个方法，该方法将检查localStorage中是否存在数据，如果不存在，它将从数据库中提取数据。

提取后，我将其放在localStorage中，所以这不是问题。但是，第一次需要收集数据时（或由于需要另一个触发器让我知道何时更改，因此我需要刷新数据时），页面和组件已经呈现（由于缺少数据而出错）。数据又回来了。 fetch方法位于promise中，但是mounted事件似乎并不关心在内部是否存在promise之前继续到下一个组件。

那么在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>

如何确保Vue中加载了参考数据？

1 个答案: