外部データでアプリケーションを初期化する

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

多分これはあなたを指示します。より高度な '初期設定前' の

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例を見て。

Answer 2

データが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>