ページ表示前にデータを取得して反映できる「Nuxt.js」の非同期データ機能を使いこなそう

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第6回

asyncDataの引数で処理内容をカスタマイズ

　asyncDataメソッドの引数（コンテキスト）では、リスト2（1）で利用した$axiosのほかにも、処理内容をカスタマイズする変数が利用できます。本記事では、この中でも代表的な変数について利用例を紹介します。利用できるすべての変数は公式ドキュメントを参照してください。

ルートのパラメーターを取得できるparams

　asyncDataメソッドの引数からルートのパラメーターを取得して、そのパラメーターに対応したデータをAPIから取得するサンプル（図3）を説明します。このサンプルを実行するときは、対応するAPIのプロジェクト（p003-api-mock）を先に実行してください。

図3：ルートのパラメーターをasyncDataメソッドで取得するサンプル（p003-asyncdata-params）

　トップページ（pages/index.vue）には、リスト6の通り、詳細ページへのルートを「detail/<ID番号>」形式で設定します。

［リスト6］詳細ページへのルート設定（p003-asyncdata-params/pages/index.vue）

<li><nuxt-link to="detail/1">北山本駅</nuxt-link></li>
<li><nuxt-link to="detail/2">山本駅</nuxt-link></li>
<li><nuxt-link to="detail/3">南山本駅</nuxt-link></li>

　詳細ページ（pages/detail/_id.vue）のasyncDataメソッドでパラメーターを受け取る実装は、リスト7の通りです。

［リスト7］asyncDataでルートのパラメーターを受け取る実装（p003-asyncdata-params/pages/detail/_id.vue）

asyncData({ $axios, params }) { // パラメーターを含むparamsを記述 ...（1）
  // paramsから、パスに指定されたID番号を取得 ...（2）
  const stationId = params.id
  // ID番号を指定してAPIを呼び出し ...（3）
  return $axios.get(`http://localhost:3001/station/${stationId}`)
  .then(res => {
    // APIのレスポンスデータを設定 ...（4）
    return res.data
  })
}

　（1）でasyncDataの引数に記述したparamsは、ルートのパラメーターに関する情報を持っています。（2）のparams.idで、ルートからID番号を取得した後、（3）でID番号を指定してAPIを実行すると、ID番号に対応したデータを取得します。取得したデータを（4）で設定して、<template>部に表示させます。

　なお、Nuxt.jsのルーティング機能については、第3回の記事も参考にしてください。

エラー発生時に実行するerrorメソッド

　また、リスト7を修正してリスト8の通り実装すると、エラー発生時の処理を実装できます。

［リスト8］asyncDataにおけるエラー処理の実装（p004-asyncdata-error/pages/detail/_id.vue）

asyncData({ $axios, params, error }) { // エラー時メソッドerrorを記述 ...（1）
  const stationId = params.id
  return $axios.get(`http://localhost:3001/station/${stationId}`)
  .then(res => {
    return res.data
  }).catch(e => {
    // エラー発生時にerrorメソッドを実行 ...（2）
    error({ statusCode: 404, message: 'ページが見つかりません' })
  })
}

　（1）でasyncDataの引数に記述したerrorは、エラー発生時に実行するメソッドで、（2）の通りステータスコード（statusCode）と文言（message）を指定して実行します。

　データをまったく返さないAPIのプロジェクト（p004-api-mock）を実行後、リスト8のサンプル（p004-asyncdata-error）を実行して、任意の詳細ページを表示させると、リスト8（2）の処理によって図4のエラー画面が表示されます。

図4：errorメソッドを実行して表示したエラー画面（p004-asyncdata-error）