見て頂きありがとうございます。
今日はVue.jsの状態管理ライブラリであるVuexについてまとめたいと思います。
知識の定着のために書くもので、めちゃくちゃ基本的なことなので、参考にしないほうが良いと思います（笑）
そもそも状態管理とは
サービスがそれなりに大きくなってくる、コンポーネントが複数、当然親子関係にあるコンポーネントも作成されます。
その分コンポーネント間のデータの受け渡しも発生します。
Vuexを使用しない方法だとpropsで親から子へデータを受け渡し、$emitで子から親にデータを送ることができます。
このようにデータの受け渡しが増えてことで、データがどこで変更されたのか等追いづらくなり、コードの可読性が悪くなってしまいます。
このデータの状態流れを管理することを状態管理といい、上記のような問題を解決するために使用するのが、Vuexです。
Vuexの中心となるStoreについて
ストアはアプリケーションの状態(state)を管理するためのコンテナである。
データを保持しておく場所のことですね。
ストアの状態は直接変更することはできません。
後述するmutationをcommitすることによってのみ変更することができます。
Storeには４つの概念があります。
- state→アプリケーションの状態（情報）
- mutation→stateを更新（変化）させる
- action→非同期通信や外部APIとのやりとりを行う
- getter→stateの一部やstateから返された値を保持する
この４つをひとまとまりにしたものをモジュールといい、モジュールでこの４つを守っているイメージです。
state
stateはアプリケーション全体のデータの状態を管理します。
現在のデータの状態を確認したり、特定のデータの状態を見つけるために役立ちます。
呼び出し：store.state.state名
mutations
mutationsはstateの更新だけを行います。
stateの更新が行えるのはこのmutationだけです。
呼び出し：store.commit('mutation名', payload)
(引数)
mutation => 第一引数： state(渡されたstateを更新)
commmit => 第二引数： payload(第二引数のことをpayloadと呼び、これを使用することで同じmutationsで異なるstateを変更することができる)
※原則として、mutation以外でstateの更新を行うことは禁止されている。
stateの状態を追跡しやすくするため。
また、全ての処理は同期的である必要があり、非同期処理を行いたい場合はactionsで定義する。
action
actionは非同期処理や外部APIとの通信を行い、最終的にmutationを呼び出す為に使われます。
呼び出し：store.dispatch(action名)
(引数)
ctx(context)
contextとは特別なオブジェクトで、次の内容が含まれています。
- state: 現在のstate
- getters: 定義されているgetter
- dispatch: 他actionを実行するメソッド
- commit：他のmutationを実行するメソッド
getter
getterはstateから別の値を算出する為に使われます。
gettersは算出プロパティcomputedと同様の働きをします
呼び出し：store.getters.getters名
Vuexの中心となるStoreの４つの概念についてまとめてみました。