Vue.js + Vuex + でStoreとは？
まずVueXとは？ Vue.jsの問題点を解決するための仕組み
この記事は、下記公式サイトを参照しています。 また画像も下記サイトから転用しています。
Vue.jsの問題点
- アプリが大きくなると、コンポネントの間の親子関係を通して値のやり取りがきつくなる。
- それぞれのコンポネントが、値を書き換えると、そこでのエラーが発生する。
- アプリ全体の状態を保持することができないことはないけど、難しい。どこからでもstateの状態を変更できるので、他のcomponentが、stateの状態を変更中でもできてしまう。バグを発生しやすくなる。
VueXの解決方法
- アプリ全体のstateを１つの場所で管理する。それが store.
- store は Vueのインスタンスと似ている（下記参照)
- componentは、data, methods, computedをもつ
- dataは値、 methodsはdataの値を変更する関数、 computedからdataの値にアクセスする。
いつどこで、どのコンポネントがstateを変更するか予期するために、VueXは４つのパターンを用意した。
- storeはstate , mutations, actions, gettersをもつ
- stateは値、 actionsは、stateの値を変更する(methodsに当たる), gettersは、stateの値にアクセスする
- 値の変更履歴を見るためにactionsは mutationsを通して stateの値を変更する。 ここがgitのような役割をして、stateの変更履歴保持している
- mutationは同期のデータしか扱えない、 非同期のデータを扱うにはactionsを利用 する。保険として、全てactionsを利用したほうが良い。
処理の流れ
- actionsのなかでcommit している。これがmutationを呼び出す。
このcommitが大切で、その前にaxiosでAPI等に問い合わせをして、待ちの状態が発生していることに注目
- 呼び出されたmutationはstateの値を変更する
最後にloadingが完了したら storeのstateの値をgettersでcomponentに移動する
storeの値はgettersで取り出せる
必要な仕組みですね。考えた人賢い!
