如何确保引用数据加载到 Vue 中? [英] How To Ensure Reference Data Is Loaded In Vue?

问题描述

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

I have webpack setup to bundle all of the source. I have a Vue object that is the page and multiple Vue components of my own creation. This works great!

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

I am now getting reference data from the database to fill in certain default options for some of these components. In my pages Mounted or Created events (there is no difference for my question) I am calling a method that will check to see if the data exists in localStorage and if not, it will extract the data from the database.

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

Once Extracted, I have it in localStorage so it is not an issue. However, the first time I need to gather the data (or when I need to refresh it because I have another trigger that lets me know when it has changed) the page and components have rendered (with errors because of lack of data) before the data comes back. The fetch method is in a promise, but mounted events don't seem to care if a promise exists within in before it continues to the next component.

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

So what is the best practice for loading/refreshing reference data in Vue? I am currently not using VueX because this is not a SPA. Sure, it is a single page that is doing things (there are many single pages that do their own thing in this site) but I have no need to make it a full SPA here. But If VueX and its store will give me some sort of guarantee that it will occur first or page/components will run AFTER VueX things, I will learn it.

推荐答案

您是否尝试过这样做:

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

在你的 Vue 组件中:

in your Vue-component:

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

您可以使用 v-if 和 v-else 来显示，例如像这样的页面加载器元素:

You can use v-if and v-else to show, for example page loader element like so:

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

这篇关于如何确保引用数据加载到 Vue 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！