FrontEnd

Vuexの機能と使い方

投稿日:

はじめに

アプリケーションの規模が大きくなっていくにつれ、状態管理が重要になっていきます。今回の記事では、Vue.jsにおける状態管理ライブラリであるVuexの機能と使い方を紹介します。

Vuexとは

VuexはVue.jsにおける状態管理のためのライブラリです。Flux、Elmアーキテクチャ、Reduxなどの影響を受けており、データフローが単方向になるように設計されています。

データフロー設計において頻出するデザインパターンとして、以下の3つがあがります。

  • Single Source of Truth
  • 状態の取得、更新のカプセル化
  • 単方向データフロー

これらを意識してデータフローを設計することで、変更に強く柔軟なアプリケーションを作ることが容易になります。

Vuexを使うことで、これらのデザインパターンに沿った実装が容易になります。

Single Source of Truth

Single Source of Truth(信頼できる唯一の情報源)とは、データの管理を一箇所に集約することで、管理を容易にすることを目的としたデザインパターンです。これには、以下のような利点があります。

  • どのコンポーネントからも同一のデータを参照するため、データの不整合が発生しにくい。
  • 複数のデータを組み合わせた処理を比較的容易に実装できる。
  • データの変更に関するデバッグがしやすくなる。

Vuexはアプリケーションの状態やそれを管理する処理が一箇所にまとまるように設計されているため、上記を満たすことができます。

状態の取得、更新のカプセル化

状態の取得、更新をカプセル化することにより、状態管理のコストを下げることができます。カプセル化を行うことには以下のような利点があります。

  • 状態の取得、変更処理を様々な場所から利用できる。
  • データの取得、更新処理をビューから切り離すことで、これらを変更した際の影響範囲を小さくできる。
  • デバッグ時に確認する場所を限定できるため、デバッグがしやすくなる。

Vuexでは状態の更新をミューテーションと呼ばれる機能でのみ行い、状態の取得をゲッターと呼ばれる機能でのみ行うため、上記を満たすことができます。

単方向データフロー

データフローを単方向にすることで、状態の取得、更新処理が簡潔になります。これには以下のような利点があります。

  • データの取得と更新が同時に行われなくなり、実装やデバッグがしやすくなる。
  • データの取得、更新方法が絞られる事により、コードが理解しやすくなる。

先程あげたとおり、Vuexでは状態の更新はミューテーションで、取得はゲッターで行うため、実装が強制的に単方向データフローになります。

Vuexのストア

Vuexではストアの役割を抑えておくことが重要です。ストアは主にアプリケーションの状態を保持する役割をもっています。

Vuexでは前述のSingle Source of Truthを前提に実装されているため、アプリケーション内で常に1つのストアのみが存在するようにします。

ストアは、ステート、ゲッター、ミューテーション、アクションという4つの要素から成り立っています。それぞれについて順次説明します。

ステート

ステートはアプリケーション全体の状態を保持するオブジェクトです。すべてのステートは1つの木構造として表現されます。アプリケーションのすべての状態を1つの木としてステートを保持することで、Single Source of Truthを実現しています。

しかし、すべてのステートを1つのファイルで実装しなければならないというわけではありません。ステート数が多くなった場合はモジュールとして分割管理することで、状態管理が複雑になりすぎないようにします。

また、アプリケーションのすべてのデータをステートで管理すべきというわけではありません。あくまで、アプリケーション全体で使用するデータのみステートで管理すべきです。

ステートでの管理に適したデータとしては以下のようなものがあります。

  • メニューの開閉状態を管理するフラグ
  • API通信中かどうかのフラグ
  • ログイン中のユーザのデータ

コンポーネントで管理したほうが良いデータとしては以下のようなものがあります。

  • 入力中のフォームのデータ
  • ドラッグ中の要素の座標

ゲッター

ゲッターはステートから別の値を算出するために使われます。例えば、ユーザの操作で商品のリストを絞り込みたい場合は、ゲッターで商品の絞り込みを行ってからリストを返却します。

ゲッターを利用することで、異なるコンポーネント間でロジックを共有しやすくなります。また、算出ロジックをストア内に置くことで、処理を探しやすく、テストがしやすくなるという利点があります。

ゲッターはcomputedと同様に値がキャッシュされるため、よく利用するステートの算出ロジックをゲッターにすることでパフォーマンスの向上が期待できます。

ミューテーション

ミューテーションはステートを更新するために使われます。Vuexでは原則的にミューテーション以外がストアを更新することを禁止しています。ステートの更新をミューテーションのみが行うことで、ステートの変更がいつ、どこで行われたか追跡しやすくなります。

アクション

アクションは非同期処理や外部APIとの通信を行い、最終的にミューテーションを呼び出すために使われます。

Vuexの使用例

それでは、Vuexの使い方をコード例を交えて説明します。

インストール

Vuexはnpmコマンドでインストールすることができます。

main.jsでストアをインポートし、コンポーネントからストアを利用できるようにします。

ステートの定義

簡単なメモアプリケーションを想定してストアを定義します。状態として、日付、タイトル、本文を保持できるようにします。

テンプレートからは、以下のようにステートを利用します。

ミューテーションの定義

メモを登録できるようにミューテーションを定義します。

テンプレートからは、以下のようにミューテーションを利用します。

ゲッターの定義

メモをタイトルで検索するためのゲッターを定義します。

テンプレートからは、以下のようにゲッターを利用します。

アクションを定義

登録したメモを永続化できるようにアクションを定義します。

テンプレートからは、以下のようにアクションを利用します。

さいごに

Vueの状態管理ライブラリであるVuexの機能と使い方を紹介しました。

おすすめ書籍

Vue.js入門 基礎から実践アプリケーション開発まで 基礎から学ぶ Vue.js 動かして学ぶ!Vue.js開発入門 (NEXT ONE)

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で ...

[Next.js] netlifyからCloudflare Pagesに引っ越してみた

1 はじめに2 netlify vs Cloudflare Pages3 Cloudflare Pagesへのデプロイ4 netlifyでのリダイレクト設定とビルド停止5 さいごに6 おすすめ書籍 は ...

react-icon

MUI Themeでカラー、シャドウ、フォントなどを設定する

1 はじめに2 Themeとは3 Themeのセットアップ4 Themeの設定方法4.1 Palette4.1.1 colorオブジェクト4.1.2 直接色を指定する4.2 Elevationのシャド ...

Next.jsでJSON-LDを実装する

1 はじめに2 リッチリザルトとは3 構造化データとは4 Next.jsでJSON-LDを実装4.1 JSON-LDデータの作成4.2 JSON-LDデータの埋め込み5 リッチリザルトテスト6 さいご ...

Vue 3とVuex 4とTypeScriptでタイプセーフに開発する

1 はじめに1.1 インストール1.2 Storeの設定2 Storeの作成3 StoreをComponentから使用する4 $storeプロパティに型をつける5 さいごに6 おすすめ書籍 はじめに ...

フォロー

blog-page_side_responsive

2019年12月
1234567
891011121314
15161718192021
22232425262728
293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。