vue.js - 如何使用外部 JSON 初始化应用程序？

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 的 react 性。

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

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

是否有实现此目标的最佳实践方法？

Answer 1

当使用 v-if 加载数据时，您可以使用一个简单的 bool 值来隐藏组件。将名为 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>