asyncData / fetchはどちらもライフサイクルのタイミングが同じなので混同されがちですが、しっかりと使い分ける必要があります!!
使用方法をしっかり理解しましょう。
説明するにもNuxtは公式ドキュメントが綺麗にできすぎていてだいたいのことはドキュメントを見ればわかります。困ったときはドキュメントを見ましょう。
fetchの説明は以下のようになっています。
fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。コンポーネントのデータをセットしないという点を除いては asyncData メソッドとよく似ています。
公式ですらasyncDataと似ているといっています笑。大事なのは以下の部分
fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。
そして、asyncDataはこのような説明になっています。
サーバーサイドでデータを取得し、それをレンダリングしたいことがあるでしょう。Nuxt.js はコンポーネントのデータをセットする前に非同期の処理を行えるようにするために asyncData メソッドを追加しています。
asyncDataはコンポーネントにデータをセットするための処理をかく。
つまり、fetchとasyncData明確な違いは、データをどこにセットするかで使い分けます。
これだけ覚えておけばだいたい大丈夫です笑。
次は、それぞれの処理の特徴を細かく見ていきましょう。
fetch
fetchが呼び出されるタイミング
サーバーサイド
Nuxt アプリケーションへの最初のリクエスト時に1度だけ呼び出されます
クライアントサイド
他のルートへ移動したときに呼び出されます。
※使用する時の注意
fetch
内ではコンポーネントがインスタンス化される前に呼び出されるため、this
を通してコンポーネントのインスタンスにアクセスすることはできません!!
また、ストアアクションを呼び出す場合は、fetch 内の store.dispatch を使用する必要があります。
その際、async/await
を用いてアクションの終了を待つようにしましょう。
front.vue
<script>
export default {
async fetch ({ store, params }) {
await store.dispatch('GET_STARS');
}
}
</script>
index.js
// ...
export const actions = {
async GET_STARS ({ commit }) {
const { data } = await axios.get('http://my-api/stars')
commit('SET_STARS', data)
}
}
asyncData
サーバーサイドでデータを取得し、それをレンダリングしたいことがあるでしょう。Nuxt.js はコンポーネントのデータをセットする前に非同期の処理を行えるようにするために asyncData メソッドを追加しています。
asyncDataが呼び出されるタイミング
ページコンポーネントがロードされる前に毎回呼び出されます。
サーバーサイドレンダリングや、ユーザーがページを遷移する前にも呼び出されます。
第一引数として context(オブジェクト)を受け取り、context を使ってデータを取得してコンポーネントのデータを返します。
asyncData の結果は data とマージされます。
export default {
data () {
return { project: 'default' }
},
asyncData (context) {
return { project: 'nuxt' }
}
}
asyncData メソッドはコンポーネントが インスタンス化される前に 呼び出されるためです
説明はこれで以上です。
asyncData
と fetch
の使用方法の違いはわかりましたか?
データをどこにセットするかを意識すれば、迷うことはなくなると思います。
それでは素敵なNUXTライフを〜。