Vuexの簡単なまとめ

Vuexとは
Vuexとはvueで使われる、状態管理のためのライブラリ
ポイントはアプリケーションの状態を一つの場所において管理する
store(ストア)というデータの入れ物を作り、各コンポーネントからストアにアクセスしてデータの出し入れを行う
Vuexの機能はAction, Mutation, State, Getterで構成される
基本的には１つのアプリケーションで１つのストアを持つ
 

コンポーネントがステートのデータを参照する時には、直接参照する場合と、ゲッターを経由するパターンがある。
直接参照する場合は、特に加工が必要のない、ステートに格納されたそのままのデータを受け取りたい時にする
ゲッターを経由する場合は、ゲッターメソッドを使ってステートにあるデータを加工したものを受け取りたい時にする（ステートにあるデータをフィルターしたものを受け取るなど）

ステートは、データを格納したオブジェクト
アクション、ミューテーション、ゲッターは、説明した機能を持ったメソッドを定義して実装する
 

用語説明
state(ステート)
アプリケーションの状態を保持する
ストアのデータは全てステートに保持される
信頼できる唯一の情報源（single source of truth）
Vue でいうところのdataオプションに近い
省略不可

Actions（アクション）
外部APIとの通信を行い、ミューテーションを呼び出す役割（API通信がなければ省略可能）
非同期処理が必要な時はここに書く
実際にはindex.jsでActonsプロパティを用意して、Pagesからは「$store.dispatch('hoge(任意のアクション名)')」などで呼び出す
Mutations（ミューテーション）
Vuex状態を唯一変更できる存在
省略不可
index.jsでMutationsプロパティを用意して、Pagesからは「$store.commit.hoge(任意のデータの名前)」で呼び出す

Getters(ゲッター)
コンポーネントからステートにあるデータを加工して受け取りたい時に使う