Vuexって必要?(PF作成)

絶賛ポートフォリオ作成中で、つまづきポイントが出てきた。

状態管理どうする?と。

ほとんどがRuby on Rails で一部だけVue.jsで実装する場合、セッション情報の管理とかはRailsが行うからVuexは入れないでいいとよく聞くけど、実際どうなの?と。

整理してから考えてみる。

 

結論

自分が作るような小規模なポートフォリオにVuexに入れる必要はない。

Vuexについて

Vuexって何?

  • 状態管理のパターンを提供してくれるライブラリ
  • 単方向データフローを強制する。

view ⇨ action ⇨ mutation ⇨ state ⇨ getter ⇨ view ...

  • グローバルデータを一元管理。

ローカルとグローバル全てのデータやメソッドをVuexで一元管理させることはアンチパターンとされている。

Vuexの責務は?

グローバルデータを安全に一元管理すること。

どういう時に使うの?

アプリ開発を行なっている時に、階層が何層にも増えそうだな〜って予想される時に使う。

Vue.jsのようなコンポーネント指向のMVCライブラリは、一つのコンポーネントに一つの役割を持たせることがベターとされている。単一責任の法則っていうらしい。コンポーネントに分けることで、後から見た人がメンテナンスをしやすくなることに繋がるため、中〜大規模開発で大活躍する概念だそう。

一方で、それぞれのコンポーネントのメソッドの受け渡しがかなり面倒なことになるというデメリットもある。

例えば、通販サイトのホーム画面を実装したいときに、「通販サイトのホーム画面の中のnavバーの中の会計ボタンの中の購入ボタン」のように、コンポーネントの親子関係が複雑になることがしばしば起こるらしい。

このように、階層がかなり増えることが予想される中〜大規模開発において、状態管理ライブラリであるVuexが役に立つんだそう。

なんで?

階層が何層にも増えると、自分の現在書いているComponentが親や子から見てどの階層にいるか分からなくなってしまうから。そのため、$emitとpropsをどう使ってメソッドやイベントをやり取りすればいいかわからなくなってしまう。

再度、結論

だから、ページ数が15枚程度の自分のアプリに入れてもVuexの効果は発揮できないので入れないでヨシッ!

状態管理のことをセッション管理だと思っていた自分が恥ずかしい。。

セッション管理は変わらずsorceryで頑張ろ、、

vuexで何をするか、何をしないか / what should do or not with Vuex

Vue.js + Vuexでデータが循環する全体像を図解してみた - Qiita