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)

page_footer_300rect




page_footer_300rect




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

1 はじめに1.1 サンプル2 とりあえず作ってみる2.1 ソースコード2.2 セレクトボックスにv-modelでバインド2.3 <option>はv-forでリストレンダリング2.4 メ ...

vuex-module-decoratorsとTypeScriptでvuexをスマートに書く

1 はじめに2 導入3 どのように記述するか3.1 初めに3.2 state3.3 mutation3.4 action3.5 getter3.6 async MutationAction3.7 Dy ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

フォロー

follow us in feedly

page_side_300rect

2019年12月
« 11月  
1234567
891011121314
15161718192021
22232425262728
293031 

アプリ情報

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