Vuex とは

Vuex は、グローバル変数を使うために使います。

そして Vuex は一般になるべく使わない方が良いという記事を見かけます。 とても勉強になります。

だいたい以下のような使い分けかなと個人的に思っています。

◯ Vuex を使う
データベースを操作するとき
  ただし state と関係のない操作を除く
  ただし Atom, Molecule レベルの汎用コンポーネントを除く
// 参考: Webフロントエンド開発現場を前向きに改善した話

◯ Vuex を使わない
上記以外
// 参考: vuexで何をするか、何をしないか

Vuex をなるべく避ける理由

Vuex を避ける理由は、グローバル変数をなるべく避けるのと同じだと思っています。 まず第一に Single File Component(以下 SFC) が、副作用を持ってしまうからです。 また第二に SFC が、その state を使っている他の SFC と結合してしまうからです。

第一の要因については props で渡してくれれば、関数として取り扱うことができ副作用がありません。 副作用がなぜいけないかは、別の記事で書かせていただきました。

第二の要因については props で渡してくれれば、呼び出し元の SFC とだけ関係を持つことになります。 state を使い複数の他の関係を持ってしまうと、関係を持っている SFC の数だけ意識しないといけない SFC が増えてしまいます。 意識しないといけないものが増えるので、読み書きする負荷が高いコードになってしまいます。

さらに悪いことに第二の要因に拍車をかけているのは、 その state が、どの SFC から参照されたり、あるいは操作されたりしているか、わからないことです。 state を持たせた時点で意識しないといけない範囲がシステム全体に及んでしまいます。

Vuex を積極的に使うもの

例外的に、データベースを扱う操作は積極的に Vuex で使った方が良い気がします。 なぜなら、データベースの値がグローバル変数なので、グローバル変数を扱う Veux を使った方が自然な書き方になる気がするからです。

Vue <-> Vuex -> データベース

例えば、ログインはデータベースを扱う処理だから Vuex 経由で処理して、結果は Vuex に保存します。 それ以外の状況では、なるべく props と emit でデータを渡し、どうしても手間な場合だけ Vuex を使うという感じかなと思っています。

それでも state と関係のない処理まで Vuex に突っ込んでしまうと Vuex が肥大化してしまうので、state と関係の無い処理は避けましょうね、ということらしいです。

当然ですが、ActionからはVuexでの状態管理に関連のない処理は排除しました。 Stateの整理をしたことによりVuexで扱わなくなったデータの取得処理は、Actionではなくコンポーネントのメソッドに移動しました。 値を加工するだけの純粋関数等、AdapterやRepositoryに置き場所のない処理はhelperファイルに退避させました。
Webフロントエンド開発現場を前向きに改善した話

"「Atom」「Molecule」レベルの汎用コンポーネントは、Vuex Stateを参照しない" というのは、 恐らく Vuex を使ってしまうと、他の Organism レベルのコンポーネントで使い回すことができなくなってしまうからだと思っています。

当プロダクトでは、当初からコンポーネント分割の基準として導入していたAtomic Designという設計手法に基づいた簡潔なルールを元に、リファクタリングを行いました。 「Atom」「Molecule」レベルの汎用コンポーネントは、Vuex Stateを参照しないというルールです。
Webフロントエンド開発現場を前向きに改善した話

使い回しについては 関数型コンポーネントってなに? で書かせていただきました。