Webページの状態を集中管理できる「Nuxt.js」のVuexストアを使いこなそう

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

　本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回はWebページの一部分を部品として再利用できるコンポーネント機能を説明しました。今回は、Webページの入力内容や表示内容といった状態を集中管理できるVuexストアについて説明していきます。

はじめに

　Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。

　Webページを複数のコンポーネントに分割できるJavaScriptフレームワークでは、あるコンポーネントの状態（入力／表示内容）を他のコンポーネントで利用する場合、不整合なく状態を共有する仕組みが必要となります。

　そういった仕組みとして、Webページ全体の状態を単一の場所に保持して、各コンポーネントから参照／更新する方法が提案されました。こうした方法は、Reactで利用されるFluxやReduxが有名ですが、Vue.jsではVuexと呼ばれる仕組みが利用できます。Nuxt.jsのプロジェクトでは、Vuexで状態を保持する「Vuexストア」を、標準で（追加インストールなしで）利用できます。

　本記事では、Nuxt.jsのWebページで、Vuexストアを利用して状態を管理する方法を、サンプルとともに説明していきます。

対象読者

• Vuexの考え方を理解したい方
• Nuxt.jsでコンポーネント間のデータ連携をシンプルに行いたい方
• 複雑なデータ構造を持つWebページを作りたい方

必要な環境

　本記事のサンプルコードは、以下の環境で動作を確認しています。

• Windows 10 64bit版
  • Node.js v12.13.1 64bit版
  • Nuxt.js 2.10.2
  • Vue.js 2.6.10
  • Microsoft Edge 44.18362.449.0

　サンプルコードは、Nuxt.jsのCLIツール（create-nuxt-app）で生成したプロジェクトを元に実装しています。CLIツールの利用法やプロジェクト構成などの詳細は、連載第1回の記事を参照してください。

　サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run dev」コマンドを実行して、Webブラウザーで「http://localhost:3000/」を開きます。

Vuexの構成要素と処理の流れ

　最初に、Vuexを構成する要素と処理の流れを、図1で説明します。Vuexストアは、図の青色点線部分の機能を提供します。

図1：Vuexの構成要素と処理の流れ

　コンポーネントがWebページの状態を更新するには、Vuexストアの「アクション」（1）を実行します（アクションの実行を「Dispatch」と呼びます）。アクションでは、必要に応じてWeb APIなどを実行して、更新するデータを取得します。

　アクションで取得したデータを状態に反映するには、「ミューテーション」（2）を実行します（ミューテーションの実行を「Commit」と呼びます）。Vuexでは、非同期処理と状態の更新を分離して扱うため、Web API実行などの非同期処理はアクションで行い、ミューテーションは必ず同期的に行います。

　（3）の「ステート」は、Webページ全体の状態を保持します。ミューテーションはステートの変更（Mutate）を行い、コンポーネントは変更されたステートに基づいて画面を表示（Render）します。

　この流れに基づいてVuexストアに状態を格納することで、開発者は、Webページの状態管理をVuexストアに任せることができます。