【Nuxt.js】asyncDataの引数はContextというオブジェクトです

asyncDataの引数について

Nuxt.jsでよく使われる「asyncData()」メソッドの引数には、
Contextというオブジェクトが渡されてきます。

例

index.vue

export default {
  async asyncData ({ params }) {  // ここでContextが引数に渡されてくる
    let { data } = await axios.get(`https://api-test/posts/${params.id}`)
    return { name: data.name }
  }
}

参照：公式ドキュメント/非同期なデータ

Contextとは

Contextには、paramsやstore、route等の
asyncData内で使用できるオブジェクトが入っています。
Contextの詳細については、公式ドキュメント/Contextに詳しく載っています。

asyncData({ params })の{}はES6の分割代入

引数の{}のなかにContextの中身を書いているのは、
下記のような記法を利用しているためです。

例

index.js

  const vegitables = { tomato: 1, lettuce: 2, eggplant: 3 }
  const { tomato } = vegitables

  console.log(tomato) //　「1」が出力される

この記事を書いた経緯

Nuxt.jsで開発を始めた時、asyncDataの引数が何なのか理解に時間がかかったため、
分かりやすくまとめてあるサイトがあるといいなと思ったためです。
公式ドキュメント/非同期なデータにasyncDataの引数についての記載はありますが、
理解に時間がかかりました。