サーバーサイドでデータを取得し、それをレンダリングしたいことがあるでしょう。 Nuxt.js はコンポーネントを初期化する前に非同期の処理を行えるようにするために
asyncData
メソッドを追加しています。
Nuxt.js で非同期なデータをどう管理するかについて学びます。
Nuxt.js の開発をサポートするために、VueSchool がビデオコースを作りました。
場合によっては、ストアを使用せずにデータをフェッチし、サーバー上でプレレンダリングしたい場合があります。 asyncData
は ページ コンポーネントがローディングされる前に常に呼び出されます。サーバーサイドでは 1回だけ(Nuxt アプリへの最初のリクエスト)呼び出され、クライアントサイドではページ遷移をするたびに呼び出されます。このメソッドは、第一引数としてコンテキストを受け取ります。これを使用してデータを取得し、 Nuxt.js はコンポーネントデータとマージすることができます。
Nuxt.js は返されたオブジェクトとコンポーネントデータを自動的にマージします。
asyncData
メソッド内の this
を通してコンポーネントのインスタンスにアクセスすることは できません。それはコンポーネントが インスタンス化される前に にこのメソッドが呼び出されるからです。
Nuxt.js では asyncData
メソッドを使うために、いくつかの異なるやり方があるので、お好きなものを選んでください:
Promise
を返す。 Nuxt.js はコンポーネントがレンダリングされる前に Promise
が解決されるまで待ちます私たちは isomorphic な HTTP リクエストを作るために axios を使っています。私たちはあなたの Nuxt プロジェクトに、私たちの axios module を使うことを強くオススメします。
export default {
asyncData ({ params }) {
return axios.get(`https://my-api/posts/${params.id}`)
.then((res) => {
return { title: res.data.title }
})
}
}
export default {
async asyncData ({ params }) {
let { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
}
asyncData の結果はコンポーネントのデータと マージされ ます。下記のように template の内側でデータを表示することができます:
<template>
<h1>{{ title }}</h1>
</template>
context
内で利用できるキーの一覧を確認するには API 基本 Context
を参照してください。
req
/res
オブジェクトの利用サーバーサイドで asyncData
が呼ばれた場合、ユーザーリクエストの req
と res
オブジェクトにアクセスできます。
export default {
async asyncData ({ req, res }) {
// req と res を使う前にサーバーサイドか
// どうかチェックしてください
if (process.server) {
return { host: req.headers.host }
}
return {}
}
}
context
パラメータを利用して動的ルートデータにアクセスすることもできます。たとえば、動的ルートパラメータには、それを設定したファイルまたはフォルダの名前を使用してアクセスできます。 pages
フォルダに _slug.vue
という名前のファイルを定義した場合、 context.params.slug
を介して値にアクセスできます。
export default {
async asyncData ({ params }) {
const slug = params.slug // /abc というパスを呼び出した時、 slug は "abc" になる
return { slug }
}
}
デフォルトでは、クエリストリングの変化で asyncData
メソッドは呼ばれません。ページネーションコンポーネントのビルド時などにこの振る舞いを変更したい場合は、ページコンポーネントの watchQuery
プロパティを見るパラメータを設定することができます。より詳しい情報は API watchQuery
プロパティ を参照してください。
Nuxt.js は、 context
に error(params)
メソッドを追加し、エラーページを表示するためにそれを呼び出すことができます。 params.statusCode
は、サーバーサイドから適切なステータスコードを表示するためにも使用されます。
Promise
による例:
export default {
asyncData ({ params, error }) {
return axios.get(`https://my-api/posts/${params.id}`)
.then((res) => {
return { title: res.data.title }
})
.catch((e) => {
error({ statusCode: 404, message: 'ページが見つかりません' })
})
}
}
エラーページをカスタマイズするには ビューのレイアウトセクション を参照してください。
間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する