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

也许这会引导你：

＆＃13;

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

＆＃13;

<template id="app">
  <p>{{ myConfig }}</p>
</template>

<script src="https://unpkg.com/vue@2.5.4/dist/vue.min.js"></script>

＆＃13;

更高级＆＃39;预初始化＆＃39;看看this示例。

使用外部数据初始化应用程序

2 个答案: