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


関連記事

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

Vue.js入門その8〜vue-draggableを使ってドラッグ機能の実装〜

1 はじめに2 準備3 一列の並び替え3.1 移動する前、移動した後3.1.1 move3.1.2 end4 2列間の移動4.1 片方を空配列にすると。。。5 さいごに6 おすすめ書籍 はじめに 久し ...

Vue.js入門その1〜基本文法〜

はじめに 軽量JSフレームワークとして有名なVue.js。 最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思 ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

フォロー

follow us in feedly

blog-page_side_responsive

2019年12月
1234567
891011121314
15161718192021
22232425262728
293031 

アプリ情報

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