vueschoolのVuexの解説がわかりやすかったので、学んだ内容についての日本語でのメモを公開します。

Vuex概要

VuexはFluxアーキテクチャを採用したVue.jsの状態管理のためのライブラリ。Reduxからも影響を受けている。
Vuexの中心にある概念としてストアがある。ストアはアプリケーションの状態(state)を保持する役割を担い、状態管理に関する機能が盛り込まれておりVuexの根幹となっている。
Vuexはアプリケーション内で1つのストアのみが存在するという前提、すなわちストアが信頼できる唯一の情報源であることを前提に実装されている。

Vuexを導入する理由

アプリケーションに共通の状態を共有する複数のコンポーネントが存在する場合、例えば以下のような場合に状態管理が破綻しやすくなる。
- 1 複数のビューが同じ状態に依存する
- 2 異なるビューからのアクションで同じ状態を変更する
1はコンポーネント同士のpropsの値の受け渡しが大変。2は複数の状態のコピーを変更、同期することになりメンテナンスが困難になりがち。
上記の問題に対し、Vuexではコンポーネントが共有する状態を抽出し、グローバルシングルトンとして管理するためどのコンポーネントにあっても状態にアクセスし、アクションをトリガーできる。
また、状態管理の概念が定義され、設計のルールが敷かれているが故に保守性を担保することができる。
ただし、あまり規模の大きくないアプリケーションにVuexを導入してしまうと、ただ単に冗長なコードの記述を求められることなってしまうので注意が必要。

ストアの状態を直接変更することはできない。明示的にmutationsをコミットすることによってのみストアの状態を変更する。これによりすべての状態変更に追跡可能な記録を残すことが保証される。

「Vuex とは何か？ | Vuex」より引用

state
- ストアで管理する状態そのもの。コンポーネントでいうところのdata。
- gettersから参照され、更新はmutationsから行う
actions
- 非同期処理や外部apiをコールするためのもの
- 複雑になることはあるが、stateの更新はしない
- 最終的にmutationsにデータをコミットする関数
mutations
- stateを更新するための関数をもつ
- かならずシンプルに保つ
- mutationsはデータ取得や複雑な計算はしない代わりにstateを更新する。
- 第一引数はstate, それ以降の引数はpayload
getters
- state内の状態をもとに算出した値を返す関数
- stateのデータを加工して表示したりする
modules
- 上記4つのストア構成要素を分割したもの。
- アプリケーションの肥大化に伴い大きくなるストアに対し、見通しをよく保つためにモジュールに分割する。
- modulesは自身を含め、上記のoptionsをすべて内包できる。