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

API: asyncData メソッド

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

  • 型: Function

情報: 非同期なデータページもご覧ください!

asyncData はコンポーネント(ページコンポーネントに限ります)がロードされる前に毎回呼び出されます。サーバーサイドレンダリングや、ユーザーがページを遷移する前にも呼び出されます。そしてこのメソッドは第一引数として context(オブジェクト)を受け取り、context を使ってデータを取得してコンポーネントのデータを返します。

asyncData の結果は data とマージされます

export default {
  data() {
    return { project: 'default' }
  },
  asyncData(context) {
    return { project: 'nuxt' }
  }
}

asyncData メソッド内で、コンポーネントのインスタンスに this を経由してアクセスしてはいけません。なぜなら asyncData メソッドはコンポーネントが インスタンス化される前に 呼び出されるためです。

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

StoryblokMoovweb Support Us