vue2：ajaxでコンポーネントデータを初期化する適切な方法が見つかりません

Question

私は、データがajaxによって初期化されるコンポーネントを持っています。私はvue.jsがいくつかのライフサイクルフックを提供していることを知っています：Lifecycle-Diagram。しかし、Ajaxはどのフックデータを、初期化するために（beforeCreateは、取り付けられた、など作成する）それを行うには最高の場所です：現在

hook_name: function() { 
    ajaxCall(function(data) { 
     me.data = data; 
    }); 
} 

、私はそれがコンポーネントを再レンダリングすること、mountedでそれを行います。しかし、私は最初のレンダリングの前にデータを取得すべきだと思います。誰かがそれを行う最善の方法を見つけ出すことができますか？

Answer 1

あなたがrequestから受け取ったデータを使用してコンポーネントを初期化したい場合は、created()はを使用するために最も適切なフックだろうけどそれはrequestあり、それははcreatedの終わりでを解決したり、mounted()ない場合があります（あなたのDOMでもコンテンツを表示する準備が整った時！）。

だからあなたのコンポーネントは次のように空のデータで初期化されています：

data() { 
    return { 
    listOfItems: [], 
    someKindOfConfig: {}, 
    orSomeSpecialValue: null 
    } 
} 

、あなたのcreatedフックでそれらを受け取るときに、これらの空のdataの特性は以下のように、その時点で利用可能となるように、実際の値を代入：

created() { 
    someAPICall() 
    .then(data => { 
     this.listOfItems = data.listOfItems 
    }) 
    /** 
    * Notice the use of arrow functions, without those [this] would 
    * not have the context of the component. 
    */ 
} 

あなたが使用していない（または使用する予定がない）ようですvuexようだが、私は非常にあなたが店であなたのデータを管理するためのためにそれを使用することをお勧めします。 vuexを使用する場合、actionsにこれらのAPI呼び出しを行うことができ、gettersをコンポーネント内で使用すると、requestによって返された値にアクセスできます。