目的
Vuexについての備忘録として。
前提
- Vueの基本的な知識があること。
データ管理の考え方
結論
アプリケーションの規模が大きくなるにつれて、状態を複数のcomponentから参照する場合に管理が複雑になるため、
タスク管理ツールなどでタスクの状態に応じて絞り込みを行うなどの機能を実装した場合に各componentごとにロジックが分散しないように一箇所でそれらのロジックを管理する。
データフロー設計のデザインパターン
- 信頼できる唯一の情報源（SingleSourceofTruth）
管理する対象のデータを一箇所に集約することで管理を容易にすることを目的としたもの。
- 『状態の取得・更新』のカプセル化
状態管理のコストを下げることを目的としたもの。componentが参照するデータのロジックを隠蔽することで実現する。
- 単方向データフロー
状態の取得、更新を簡潔にすることを目的としたもの。
双方向にデータのやり取りができる場合、各componentに更新のロジックが生成される形となり使い回しが効かなくなる。
また、類似したロジックがアプリケーション内に散在することになる。
結果的に管理のコストが増大する。
Vuex
Flux、Elmアーキテクチャ、Reduxを参考にしたもの。
Fluxアーキテクチャ
Fluxを構成する3つの要素
Store（ストア）：アプリケーションの状態データを保持するオブジェクト、状態の更新を実施する処理
Action（アクション）：状態を更新するための指示内容を表すメッセージ
Dispatcher（ディスパッチャー）:Storeに対してActionによる更新指示を行う関数
データフロー図
状態の更新指示内容である「Action」を関数である「Dispatcher」で「Store」に伝えて状態を更新し、その結果を「View（React）」に伝える、といった流れになっている。
実際にアプリケーションに組み込んだ場合には、ユーザーが画面を操作したイベントに応じて新たなActionを発行（dispatch）して、状態と画面を更新していく形になるので、次の通りになります。
2020年時点でのデファクトスタンダード的なライブラリはReduxのようです。
Vuex
ストア 状態の保持を一元的に行う。
Vuexのデータフロー
Actions
Mutationsを介して、Stateを更新するメソッドです 非同期処理でなければなりません
- Mutations
Stateを更新するメソッドです 同期処理でなければなりません
- Getters
Stateの内容から算出される値です
Componentにデータを加工して提供します（Viewに表示させる）
こちらの記事がわかりやすかったです。↓
- この動画も分かりやすかったです。
Vue.jsのコンポーネントとVuexの処理の流れを40秒のアニメーションに図解しました(๑•̀ㅂ•́)و✧@m_mitsuhide
— しばみつえ@自社開発系プログラマ (@shiba_328) 2018年7月30日
教えてくれた @m_mitsuhide がQiitaにアップしてるので詳細はURLから https://t.co/BG9b0CvrNe
「もっとやれ」ってゆうポイントあれば、ほかのも頑張るので優しいコメント待ってます🙇 pic.twitter.com/qBTluGXvie
