🌴

Vuexの基本事項を今更ながらまとめてみる

2021/12/08に公開約2,400字

はじめに

普段業務で使っているVuexについて、時間をとってドキュメントや参考資料を漁り、体系的にまとめてみた。
結果としてふわっとしていた理解が深まって良い経験だった。

Vuexとは

https://codezine.jp/article/detail/11994

Webページ全体の状態を単一の場所に保持して、各コンポーネントから参照/更新する方法が提案されました。こうした方法は、Reactで利用されるFluxやReduxが有名ですが、Vue.jsではVuexと呼ばれる仕組みが利用できます。Nuxt.jsのプロジェクトでは、Vuexで状態を保持する「Vuexストア」を、標準で(追加インストールなしで)利用できます。

らしい。。

公式では「状態管理パターン + ライブラリ」と書いてある。

https://vuex.vuejs.org/ja/#状態管理パターン-とはなんですか

具体的には

  • グローバルな状態管理が出来る
  • 単方向にしかデータの流れを扱わない事で管理を簡単にした

的なニュアンスらしい。

データの扱い方

VuexのStoreは、Actions, Mutations, Getter, Stateの4つの要素から構成される。

State

https://vuex.vuejs.org/ja/guide/state.html#単一ステートツリー
  • データの入れ物
  • APIからのレスポンスはまずStateにぶち込む
  • 基本的に扱うのはグローバルに管理したいデータ(ログイン状態など)

Getter

https://vuex.vuejs.org/ja/guide/getters.html#プロパティスタイルアクセス
  • Stateのデータをちょっくら加工してコンポーネントに提供したい時に使う

computed vs Vuex Getter

VuexのGetterはStateのデータを加工してViewに提供するという点では、コンポーネント側のcomputedでも同じ処理が可能。

違いとして

  • computedは各コンポーネント単位で実装
  • Vuex GetterはState毎で実装

という点なので、複数のコンポーネントでStateに同じ処理を施す必要があるなら、Getterで定義。そうでなければ出来るだけStore管理は軽くしたいので、computedで定義が良さそう。

Mutations

https://vuex.vuejs.org/ja/guide/mutations.html
  • Mutationsをコミットする事で唯一Stateを更新できる
  • 処理は動機的にしか出来ない。複数の状態の変更を一度に行わない事でシンプルで分かり易い状態を保つ

Actions

https://vuex.vuejs.org/ja/guide/actions.html
  • 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更新

となる。

参考

https://zenn.dev/chida/articles/e455b5139f00cc

Vuexをなぜ使うのか??

グローバルかつ単一のデータストア

コンポーネントを跨いで、共通で使いたいデータを管理出来る。
例)ログイン状態...etc

データの秩序を保ちやすい

各ページでstoreを直接更新されることはないので安心。
action → mutation → state → getter という一方向でのデータ更新を強制する

参考

https://qiita.com/Philomagi/items/55a4fbf07299113c98a1

Vuexアンチパターン

データのバケツリレーの回避目的

  • データの更新履歴を追いにくい
  • テストがやりにくい

子孫コンポーネントではちゃんとpropsから降りてきたstateを参照。
親コンポーネントではちゃんと$emitで上がってきたstateを参照。

データを全てVuexで管理

Vuexが重くなり管理しにくくなる。
リファクタも大変。

グローバルなデータ→Vuexで管理
ローカルなデータ→各コンポーネントで管理

以上。

Discussion

ログインするとコメントできます