Want to take a look at our new docs? Our new docs are now in beta. Have fun!

非同期なデータ

サーバーサイドでデータを取得し、それをレンダリングしたいことがあるでしょう。 Nuxt.js はコンポーネントを初期化する前に非同期の処理を行えるようにするために asyncData メソッドを追加しています。

asyncData メソッド

場合によっては、ストアを使用せずにデータをフェッチし、サーバー上でプレレンダリングしたい場合があります。 asyncDataページ コンポーネントがローディングされる前に常に呼び出されます。サーバーサイドでは 1 回だけ(Nuxt アプリへの最初のリクエスト)呼び出され、クライアントサイドではページ遷移をするたびに呼び出されます。このメソッドは、第一引数としてコンテキストを受け取ります。これを使用してデータを取得し、 Nuxt.js はコンポーネントデータとマージすることができます。

Nuxt.js は返されたオブジェクトとコンポーネントデータを自動的にマージします。

asyncData メソッド内の this を通してコンポーネントのインスタンスにアクセスすることは できません。それはコンポーネントが インスタンス化される前に このメソッドが呼び出されるからです。

Nuxt.js では asyncData メソッドを使うために、いくつかの異なるやり方があるので、お好きなものを選んでください:

  1. Promise を返す。 Nuxt.js はコンポーネントがレンダリングされる前に Promise が解決されるまで待ちます
  2. async/await を使う

私たちは isomorphic な HTTP リクエストを作るために axios を使っています。私たちはあなたの Nuxt プロジェクトに、私たちの axios module を使うことを強くオススメします。

node_modules 内の axios を直接使用しており、axios.interceptors を使用してデータを処理する場合、interceptors を追加する前にインスタンスを作成してください。そうしなければ、サーバレンダリングされたページをリフレッシュする際に、interceptor が複数追加され、データエラーが発生します。

import axios from 'axios'
const myaxios = axios.create({
  // ...
})
myaxios.interceptors.response.use(
  function (response) {
    return response.data
  },
  function (error) {
    // ...
  }
)

Promise を返す

export default {
  asyncData({ params }) {
    return axios.get(`https://my-api/posts/${params.id}`).then(res => {
      return { title: res.data.title }
    })
  }
}

async/await を使う

export default {
  async asyncData({ params }) {
    const { 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 が呼ばれた場合、ユーザーリクエストの reqres オブジェクトにアクセスできます。

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 は、 contexterror(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: 'ページが見つかりません' })
      })
  }
}

エラーページをカスタマイズするには ビューのレイアウトセクション を参照してください。

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

Storyblok Support Us