如何确保在 Vue 中加载参考数据？答案

【问题标题】：How To Ensure Reference Data Is Loaded In Vue?如何确保在 Vue 中加载参考数据？
【发布时间】：2019-06-11 18:38:04
【问题描述】：

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

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

提取后，我将其保存在 localStorage 中，因此这不是问题。但是，我第一次需要收集数据时（或者当我需要刷新数据时，因为我有另一个触发器可以让我知道它何时发生了变化）页面和组件在数据回来了。 fetch 方法在一个 Promise 中，但 mounted 事件似乎并不关心 Promise 是否存在于它继续到下一个组件之前。

那么在 Vue 中加载/刷新参考数据的最佳实践是什么？我目前没有使用 VueX，因为这不是 SPA。当然，它是一个在做事的单页（在这个站点中有很多单页在做自己的事），但我不需要在这里把它变成一个完整的 SPA。但是如果 VueX 和它的 store 会给我某种保证，它会首先发生，或者页面/组件将在 VueX 之后运行，我会学习它。

【问题讨论】：

标签： vuejs2

【解决方案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>

【讨论】：

我在页面上有一个init 属性，我可以很容易地实现它。谢谢！