超簡単Vuex入門①
超簡単Vuex入門①:
Vue.jsを業務で触り始めて半年が経過し、少しずつネタも溜まってきたので、
最初の頃に躓いた事をまとめていきたいと思います。
まずVuexを導入する際にめっちゃ初心者向けの記事がまだあまりなかったので、
（よく記事に書かれている、ストアとか状態管理とかの時点で？？？なレベルでした・・・）
・Vueコンポーネントのどのライフサイクルでdispatchするの？
とか、
・gettersで他のgettersで取得した値を引数にしたいよー
とか、
・単方向データフローがよくわからん
等々・・・初期でつまづいた箇所をまとめていければなと思います。
今回はVuexについてざっくり理解してもらえる事をゴールとして書いて行きます。
状態管理パターン＋ライブラリです。（読み方はビューエックス）
ふむ、状態管理？？
例えば、ショッピングサイトをVue.jsで作成して、
ユーザーが欲しい商品を買いものカゴに入れたり出したり、入れたり出したり、入れたりしたら、
カゴの中身は変わりますよね？
でも、カゴの中身の状態を複数のパーツで表示させたい場合、
（マイページ、購入画面、ヘッダーとかに表示したカートアイコンにカゴに入れたアイテム数とか・・・etc）
同じ共通のデータを使えたら、
それぞれのページやパーツで変更を加えても
マイページで表示したカゴにはアイテムが3件、
購入画面で表示したカゴにはアイテムが2件、
ヘッダーに表示したカートアイコンのアイテム数が5件、
なんていう不整合が起きなくなるのです。
参照も変更も各コンポーネントからアクセスできる場所に管理するので、
マイページでデータを変更しても、他のパーツも同じデータを参照しているので、同じ状態を参照できます。
また、入れ子になったコンポーネントでも、データの参照ができるので、
コンポーネントの親子間でデータのバケツリレーをするより、データが扱いやすくなります。
ローカルのデータベースだと思えばイメージしやすいかもしれません。
この各コンポーネントからアクセスできる状態を保持している場所をstoreと呼んでいます。
このstoreの管理に特定のルールを敷いてコードの構造と保守性を向上させたのがVuexなのです。
Vuexを使わずにstoreを作って運用する事も可能で、独自のstoreパターンを定義して運用しているプロジェクトもあります。
Vuexを入れるべきか？入れないべきか？を調べた際に出てきた記事の意見が半々くらいで（当時は）
この辺りも、私は混乱したポイントでした。
・Vuexの方が独自store定義よりも、後からプロジェクトに参画した人が触りやすくなるかも
・お気に入り機能、削除機能、ソート、絞り込み等、データに変更を加える機能が多かった
・コンポーネントが入れ子になっているので、参照しやすいように
・独自のstoreを設計できるほどの熟練者がチームにいなかった
・ゼロからstoreを設計する工数がもらえてない
等の理由から今参画させて頂いているプロジェクトでは導入しましたが、
typeScriptでゴリゴリ実装したい、とかデータフローに慣れた熟練のエンジニアがいる(独自storeの設計もドンと来い！）、とか
規模が小さいからstoreを定義するまでもなかったりとか、データ使わず部分的にVue入れてるよーとかとか・・・
プロジェクトによるので、チームで話し合って決めていくのが良いかなと思います。
簡単に言うと、データの流れを単方向にすること！
なんですが、ちょっと難しいですよね。。。
まずVuexには
■actions (コンポーネントから実行されて、APIの実行や、mutationsの実行を行う。)
■mutations (actionsから受け取った値をstateに保存する)
■state (状態のデータを保存しておく場所)
■getters (stateに保存された値をコンポーネントに返す)
があり、
常に
vueコンポーネントからdispatchでactionsが実行されて
↓
■actions でAPI通信して取得したデータや、VueComponentから引数で渡された値をセットしてmutationを実行
↓
■mutations でactionから引数で受け取った値などをstateにセット
↓
■state の変更は必ずmutationから行われる
↓
■getters でstateのデータをvueコンポーネントに返してあげる
のような流れになっており、
図にするとこのような図になります。
図を見ると矢印が一定方向ですね！
actionsから直接stateを変更したり、mutationsからactionsを実行したりはできないのです。
このように常に同じ方向でデータを管理することを単方向データフローと言っています。
■Vuexって？→状態管理パターン+ライブラリだよ。
■状態管理って？→同じアプリ内で各コンポーネントや画面で同じ状態を参照、変更できる仕組み
■storeって？→取得したデータやデータの変更を保存して同じアプリ内の各コンポーネントや画面で参照、変更できる場所。
（イメージはデータベース）
■Vuexを導入する？しない？→プロジェクトの状況による。チームで話し合おう！
■単方向データフローって？→データの流れを常に一定方向で管理
ざっくりですが、なんとな～くはイメージが出来たでしょうか？
次回は簡単なサンプルを作っていきたいと思います！
Vue.jsを業務で触り始めて半年が経過し、少しずつネタも溜まってきたので、
最初の頃に躓いた事をまとめていきたいと思います。
まずVuexを導入する際にめっちゃ初心者向けの記事がまだあまりなかったので、
（よく記事に書かれている、ストアとか状態管理とかの時点で？？？なレベルでした・・・）
・Vueコンポーネントのどのライフサイクルでdispatchするの？
とか、
・gettersで他のgettersで取得した値を引数にしたいよー
とか、
・単方向データフローがよくわからん
等々・・・初期でつまづいた箇所をまとめていければなと思います。
今回はVuexについてざっくり理解してもらえる事をゴールとして書いて行きます。
Vuexって？
状態管理パターン＋ライブラリです。（読み方はビューエックス）ふむ、状態管理？？
例えば、ショッピングサイトをVue.jsで作成して、
ユーザーが欲しい商品を買いものカゴに入れたり出したり、入れたり出したり、入れたりしたら、
カゴの中身は変わりますよね？
でも、カゴの中身の状態を複数のパーツで表示させたい場合、
（マイページ、購入画面、ヘッダーとかに表示したカートアイコンにカゴに入れたアイテム数とか・・・etc）
同じ共通のデータを使えたら、
それぞれのページやパーツで変更を加えても
マイページで表示したカゴにはアイテムが3件、
購入画面で表示したカゴにはアイテムが2件、
ヘッダーに表示したカートアイコンのアイテム数が5件、
なんていう不整合が起きなくなるのです。
参照も変更も各コンポーネントからアクセスできる場所に管理するので、
マイページでデータを変更しても、他のパーツも同じデータを参照しているので、同じ状態を参照できます。
また、入れ子になったコンポーネントでも、データの参照ができるので、
コンポーネントの親子間でデータのバケツリレーをするより、データが扱いやすくなります。
ローカルのデータベースだと思えばイメージしやすいかもしれません。
この各コンポーネントからアクセスできる状態を保持している場所をstoreと呼んでいます。
このstoreの管理に特定のルールを敷いてコードの構造と保守性を向上させたのがVuexなのです。
Vuexを使わずにstoreを作って運用する事も可能で、独自のstoreパターンを定義して運用しているプロジェクトもあります。
Vuexをプロジェクトに入れる？入れない？
Vuexを入れるべきか？入れないべきか？を調べた際に出てきた記事の意見が半々くらいで（当時は）この辺りも、私は混乱したポイントでした。
・Vuexの方が独自store定義よりも、後からプロジェクトに参画した人が触りやすくなるかも
・お気に入り機能、削除機能、ソート、絞り込み等、データに変更を加える機能が多かった
・コンポーネントが入れ子になっているので、参照しやすいように
・独自のstoreを設計できるほどの熟練者がチームにいなかった
・ゼロからstoreを設計する工数がもらえてない
等の理由から今参画させて頂いているプロジェクトでは導入しましたが、
typeScriptでゴリゴリ実装したい、とかデータフローに慣れた熟練のエンジニアがいる(独自storeの設計もドンと来い！）、とか
規模が小さいからstoreを定義するまでもなかったりとか、データ使わず部分的にVue入れてるよーとかとか・・・
プロジェクトによるので、チームで話し合って決めていくのが良いかなと思います。
単方向データフローって？
簡単に言うと、データの流れを単方向にすること！なんですが、ちょっと難しいですよね。。。
まずVuexには
■actions (コンポーネントから実行されて、APIの実行や、mutationsの実行を行う。)
■mutations (actionsから受け取った値をstateに保存する)
■state (状態のデータを保存しておく場所)
■getters (stateに保存された値をコンポーネントに返す)
があり、
常に
vueコンポーネントからdispatchでactionsが実行されて
↓
■actions でAPI通信して取得したデータや、VueComponentから引数で渡された値をセットしてmutationを実行
↓
■mutations でactionから引数で受け取った値などをstateにセット
↓
■state の変更は必ずmutationから行われる
↓
■getters でstateのデータをvueコンポーネントに返してあげる
のような流れになっており、
図にするとこのような図になります。
図を見ると矢印が一定方向ですね！
actionsから直接stateを変更したり、mutationsからactionsを実行したりはできないのです。
このように常に同じ方向でデータを管理することを単方向データフローと言っています。
まとめ
■Vuexって？→状態管理パターン+ライブラリだよ。■状態管理って？→同じアプリ内で各コンポーネントや画面で同じ状態を参照、変更できる仕組み
■storeって？→取得したデータやデータの変更を保存して同じアプリ内の各コンポーネントや画面で参照、変更できる場所。
（イメージはデータベース）
■Vuexを導入する？しない？→プロジェクトの状況による。チームで話し合おう！
■単方向データフローって？→データの流れを常に一定方向で管理
ざっくりですが、なんとな～くはイメージが出来たでしょうか？
次回は簡単なサンプルを作っていきたいと思います！
コメント
コメントを投稿