Async Data
asyncData は pages でのみ使用可能で、このフック内では this にアクセスすることはできません。asyncData はユニバーサルなデータ取得のためのもう 1 つのフックです。非同期な状態を保存するために、コンポーネントのインスタンスにプロパティをセットする（または Vuex アクションをディスパッチする）必要がある fetch とは異なり、asyncData は単にその返却された値をコンポーネントのデータにマージします。以下は @nuxt/http ライブラリを使った例です：
pages/posts/_id.vue
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.description }}</p>
</div>
</template>
<script>
export default {
async asyncData({ params, $http }) {
const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
return { post }
}
}
</script>fetch と異なり、asyncData フックから返却される promise はルートの遷移の間に解決されます。つまり、"loading placeholder" はクライアントサイドの遷移で表示されないということです（ただし読み込み中の状態をユーザーに示すために ローディングバー を使うことができます）。Nuxt は代わりに asyncData フックの終了を待ってから、次のページへ移動したりエラーページを表示したりします。
このフックはページレベルのコンポーネントのためだけに使うことができます。fetch と異なり、asyncData はコンポーネントインスタンス (this) にアクセスすることはできません。そのかわりに、context を引数として受け取ります。asyncData をデータの取得のために使うことができ、Nuxt.js は自動で返却されたオブジェクトをコンポーネントのデータとシャローマージします。
今後の例では、API からのデータの取得におすすめの @nuxt/http を使用します。
コンポーネントの非同期データ？
コンポーネントには asyncData メソッドがないため、コンポーネント内でサーバーから非同期データを直接取得することはできません。この制限を回避するには、2 つの基本的なオプションがあります:
mountedフックで API を呼び出し、ロード時にデータプロパティを設定します。欠点: サーバーサイドレンダリングでは機能しません。- ページコンポーネントの
asyncDataメソッドで API を呼び出し、データをプロパティとしてサブコンポーネントに渡します。サーバーのレンダリングは正常に機能します。欠点: ページのasyncDataは他のコンポーネントのデータを読み込むため読みにくい可能性があります。
クエリ文字列の変化のリスニング
デフォルトでは、クエリ文字列の変化で asyncData メソッドは呼び出されません。ページネーションコンポーネントを作成するときなどにこの挙動を変えたい場合は、ページコンポーネントの watchQuery プロパティを見るパラメータを設定することができます。
watchQuery プロパティについてより学び、利用可能な context 内のキーのリストを見てみましょう。