使用外部数据初始化应用

Question

我需要使用外部json数据初始化我的应用程序。我得到的问题是，我不能强制应用程序在数据到达后等待加载子组件。

例如，让我们以此为例(这里不是外部加载，我使用setTimeout来强调等待数据到达)。

new Vue({
  el: '#app',
  router,
  render: h => h(App),
  beforeCreate() {
    setTimeout(() => {
      this.myConfig = 'loaded'; // I realize I'm not using $data here, but nevermind
    }, 1000)
  },
});

在我的子组件中

created() {
  console.log(this.$root.myConfig);
},

问题是，在beforeCreate结束之前调用子进程中的created。

数据不会从初始状态更改。因此，我不需要VueX的反应性。

由于我使用的是vue-router，一种选择可能是创建一个加载组件作为默认路由，它应该加载数据，然后在到达时切换到正确的初始状态。

此外，通过查看Async Components，也许我应该使用它，但我感觉它比我需要的要复杂一点。

有没有实现这一点的最佳实践方法？

Answer 1

在使用v-if加载数据时，您可以使用一个简单的布尔值来隐藏组件。将名为loading的变量设置为true，并在完成加载后将其更改为false。然后在您的组件上使用v-if="!loading"。您可能需要一个很好的加载文本或微调的用户。

​

new Vue({
  el: '#app',
  data () {
    return {
      loading: true,
      myConfig: ''
    }
  },
  created () {
    setTimeout(() => {
      this.loading = false
      this.myConfig = 'loaded'
    }, 2000)
  },
});

<div id="app">
  <p v-if="loading">loading...</p>
  <p v-else>{{ myConfig }}</p>
</div>

<script src="https://unpkg.com/vue@2.5.4/dist/vue.min.js"></script>

​

Answer 2

也许这会指引你：

​

console.log('wait for 1 second')

new Vue({
  template: '#app',
  created () {
    setTimeout(() => {
      this.myConfig = 'loaded'
      this.$mount('#app')
    }, 1000)
  },
});

<template id="app">
  <p>{{ myConfig }}</p>
</template>

<script src="https://unpkg.com/vue@2.5.4/dist/vue.min.js"></script>

​

有关更高级的“预初始化”，请参阅this示例。