0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.jsの状態管理パターンVuex、Fluxアーキテクチャについてまとめてみた。

Last updated at Posted at 2021-03-18

Vuexを学習してて理解しづらかったので、概念をざっくりとですが、まとめてみました。
##Vuexとは
Vue.jsアプリケーションのための状態管理パターン+ライブラリです。

####Vuexを使用せず末端のコンポーネントから末端のコンポーネントにデータを渡す場合
スクリーンショット 2021-03-18 15.54.32.png
$emitで親にデータをあげて、もう一度$emitで親に上げて、propsでデータを子供に渡し、もう一度propsで子供にデータを渡す・・・というように、コンポーネントツリーが深くなればなるほど、末端のコンポーネント同士のデータのやりとりがしづらくなります。

#####Vuexを使用した場合
スクリーンショット 2021-03-18 16.09.34.png
Vuexを使用することで、親コンポーネントにデータを渡して・・といったことをせずとも簡単にデータのやり取りができるようになります。

##Vuexのデータの流れ
スクリーンショット 2021-03-18 12.23.32.png
VuexはFluxに影響を受けているライブラリで、データフローが単方向になるように設計されています。

##Fluxとは
Facebook社が提唱してるクライアントサイドのWebアプリケーション開発のためのアーキテクチャです。
単方向のデータフローを構築することで、開発規模が大きくなってもデータの流れを見失いづらいことが特徴です。
この記事に詳しいこと書いてます!

flux-react-mvc.png
MVCを例に見ると小さなアプリケーションでは適していますが、大規模開発になるとデータの流れが追いにくくなりデバックしづらくなるデメリットがあります。

そこで単方向のデーターフローを設計することでデータの変更を追いやすくしてくれてるのがFluxです!
flux-react.png

##感想
Fluxの記事を読んでVuexに関しての理解が深まったかなと思いました!
Vuexは個人で作るような小規模なアプリだと返って記述がコードが冗長になるなどデメリットもあるようですが、仕組みを理解するためにも使っていきたいなと思いました!!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?