Vuexの基本事項を今更ながらまとめてみる
こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
未経験・独学でフロントエンドの仕事を得るまでにどんな勉強をしたら良いのかをまとめました！！
興味ある方は是非ご覧ください。
はじめに
普段業務で使っているVuexについて、時間をとってドキュメントや参考資料を漁り、体系的にまとめてみた。
結果としてふわっとしていた理解が深まって良い経験だった。
Vuexとは
Webページ全体の状態を単一の場所に保持して、各コンポーネントから参照／更新する方法が提案されました。こうした方法は、Reactで利用されるFluxやReduxが有名ですが、Vue.jsではVuexと呼ばれる仕組みが利用できます。Nuxt.jsのプロジェクトでは、Vuexで状態を保持する「Vuexストア」を、標準で（追加インストールなしで）利用できます。
らしい。。
公式では「状態管理パターン + ライブラリ」と書いてある。
具体的には
- グローバルな状態管理が出来る
- 単方向にしかデータの流れを扱わない事で管理を簡単にした
的なニュアンスらしい。
データの扱い方
VuexのStoreは、Actions, Mutations, Getter, Stateの4つの要素から構成される。
State
- データの入れ物
- APIからのレスポンスはまずStateにぶち込む
- 基本的に扱うのはグローバルに管理したいデータ(ログイン状態など)
Getter
- Stateのデータをちょっくら加工してコンポーネントに提供したい時に使う
computed vs Vuex Getter
VuexのGetterはStateのデータを加工してViewに提供するという点では、コンポーネント側のcomputedでも同じ処理が可能。
違いとして
- computedは各コンポーネント単位で実装
- Vuex GetterはState毎で実装
という点なので、複数のコンポーネントでStateに同じ処理を施す必要があるなら、Getterで定義。そうでなければ出来るだけStore管理は軽くしたいので、computedで定義が良さそう。
Mutations
- Mutationsをコミットする事で唯一Stateを更新できる
- 処理は動機的にしか出来ない。複数の状態の変更を一度に行わない事でシンプルで分かり易い状態を保つ
Actions
- ActioncではMutationをコミットする。(Actions自身がStateを変えている訳ではない)
- 非同期的な処理も行える
Mutations Actionsの使い分け
基本的にMutationsがStateの更新のみ、Actionsはその他の処理を行う。
例として
「YesならStateを+1、NoならStateを-1する」の場合
Actions：Yesならnum=1を、Noならnum=-1を渡してMutationsをコミット
Mutations：numを受け取ってStore更新
となる。
参考
Vuexをなぜ使うのか？？
グローバルかつ単一のデータストア
コンポーネントを跨いで、共通で使いたいデータを管理出来る。
例）ログイン状態...etc
データの秩序を保ちやすい
各ページでstoreを直接更新されることはないので安心。
action → mutation → state → getter という一方向でのデータ更新を強制する
参考
Vuexアンチパターン
データのバケツリレーの回避目的
- データの更新履歴を追いにくい
- テストがやりにくい
子孫コンポーネントではちゃんとpropsから降りてきたstateを参照。
親コンポーネントではちゃんと$emitで上がってきたstateを参照。
データを全てVuexで管理
Vuexが重くなり管理しにくくなる。
リファクタも大変。
グローバルなデータ→Vuexで管理
ローカルなデータ→各コンポーネントで管理
以上。
Discussion