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

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

ページ表示前にVuexストアにデータを設定するfetchメソッド

　fetchメソッドは、asyncDataメソッド同様、ページコンポーネントの表示前にデータを取得しますが、取得したデータをVuexストアに設定できる点が異なります。その利用法が図5のサンプルです。このサンプルでは、トップページを表示する際に、駅のお気に入り情報をAPIから取得してVuexストアに設定します。Vuexストアの内容は詳細ページにも共有されるので、同じようにお気に入り情報が反映されます。このサンプルを実行するときは、対応するAPIのプロジェクト（p005-api-mock）を先に実行してください。

図5：fetchメソッドでVuexストアにデータを設定するサンプル（p005-fetch）

　お気に入り情報を格納するVuexストア（store/index.js）には、一意の値を格納するJavaScriptのSetオブジェクトにお気に入り情報を保持するステートfavoritesと、お気に入り情報を初期設定するinitFavorites、ID番号を指定してお気に入りを切り替えるtoggleFavoriteの2つのミューテーションを実装しています。詳細はサンプルコードを参照してください。

　トップページ（pages/index.vue）の実装はリスト9の通りです。

［リスト9］Vuexストアにデータを設定するfetchメソッドの実装（p005-fetch/pages/index.vue）

<template>
  <div class="container">
（略）
    <ul>
      <li>
        <nuxt-link to="detail/1">北山本駅</nuxt-link>
        {{ $store.state.favorites.has(1) ? '★' : '' }} <!--（1）-->
      </li>
（略）
    </ul>
  </div>
</template>
<script>
export default {
  fetch({ $axios, store }) { // storeはVuexストアに対応 ...（2）
    // お気に入り情報をAPIから取得 ...（3）
    return $axios.get('http://localhost:3001/favorites')
    .then(res => {
      // 取得データを初期設定するVuexストアのミューテーションを実行 ...（4）
      store.commit('initFavorites', res.data.favorites)
    })
  }
}
</script>

　（2）のfetchメソッドでデータを取得してVuexストアに設定します。メソッドの引数に指定したstoreはVuexストアを表すオブジェクトです。fetchメソッド内では、（3）でお気に入り情報をAPIから取得後、（4）のstore.commitメソッドでinitFavoritesミューテーションを実行して、取得データをVuexストアに初期設定します。Vuexストアに格納されたお気に入りの情報は、（1）の通り$store.state.favoritesで参照できます。ここでは、ID番号がVuexストアのお気に入り（favorites）に含まれる場合に「★」を表示するようにしています。

　Vuexストアの内容は画面をまたいで共有されるため、詳細ページでもリスト10の通り、Vuexストアのお気に入り情報を参照できます。

［リスト10］詳細ページでVuexストアを参照する記述（p005-fetch/pages/detail/_id.vue）

{{ $store.state.favorites.has(Number($route.params.id)) ? '★' : '' }}

　詳細ページで「お気に入り切り替え」ボタンをクリックしたときの処理は、リスト11の通りです。

［リスト11］お気に入り切り替えの処理（p005-fetch/pages/detail/_id.vue）

toggleFavorite() {
  // Vuexストアを更新 ...（1）
  this.$store.commit('toggleFavorite', Number(this.$route.params.id))
  // 更新した内容をAPIに送信 ...（2）
  return this.$axios.post('http://localhost:3001/favorites', {
    favorites: Array.from(this.$store.state.favorites)
  })
}

　（1）でお気に入りを切り替えるtoggleFavoriteミューテーションを実行してVuexストアを更新後、（2）の$axios.postメソッドでVuexストアの内容をHTTP POSTでAPIに送信して反映します。なお、（2）で利用されているArray.fromは、favorites（Setオブジェクト）を配列に変換する記述です。

まとめ

　本記事では、Webページの表示前にデータを取得してページコンポーネントに設定するasyncDataメソッドと、Vuexストアに設定するfetchメソッドの利用法を説明しました。これらのメソッドを活用すると、Webページの表示前にデータを取得して画面に表示する処理をシンプルに実装できます。

　次回は、Nuxt.jsで生成したWebページのデプロイについて、静的ファイルとしてWebサーバーに配置する方法や、動的なサーバーアプリとしてNode.js環境に配置する方法を説明していきます。

参考資料

• Nuxt.js
• Vue.js