vue.js（nuxt.js）の各コンポーネントのデータをロードして入力したい

Question

プロジェクトを次のように開始します。

vue init nuxt/express 

私のディレクトリが...

components 
|- slider.vue 
|- list.vue 
pages 
|- index.vue 

とコンポーネントは、私は、以下の構造を設定

<template> 
    <my-slider/> 
    <my-list/> 
</template> 
<script> 
import MySlider from '~components/slider' 
import MyList from '~components/list' 
export default { 
    components: { 
    MySlider, 
    MyList 
    }, 
    asyncData() { 
    ... axios get ... 
    return { 
     img: response.data.img 
    } 
    } 
} 
</script> 

index.vue、

です。

GET /要求が発生した場合、

Iは、各コンポーネント（MySlider、MYLIST）にデータベースからデータをインポートします。

1. 各コンポーネント（MySlider、MyList）はasyncData（）からのA​​xios要求を行う必要がありますか？インデックスコンポーネントasyncData（）からAxiosリクエストを行う必要がありますか？
2. リクエスト後にAxiosレスポンスデータを初期化するようにデータを設定するにはどうすればよいですか？

Answer 1

データの設定方法を決定します。 両方のサブコンポーネントで同じデータを使用している場合は、それらを親コンポーネントからフェッチし、プロパティを使用してMySliderコンポーネントとMyListコンポーネントに送信します。

両方のコンポーネントのデータが互いに関係がない場合は、これらのコンポーネントをできるだけ疎結合しておき、データを必要に応じて取得するようにしてください。

VueJSのライフサイクルフックを見て、コンポーネントで発生するライフサイクルイベントをどのように取り込むかを確認してください。これらのフックを使用すると、必要に応じてすぐにデータを取得することができます（読んでください：あなたのコンポーネントが作成/マウントされる/あなたの望みどおりに）：https://vuejs.org/v2/api/#Options-Lifecycle-Hooks