Web制作

Vuex(ビューエックス)について超ざっくり調べてみた

Vuex(ビューエックス)についてざっくり調べてみた

はじめに

Vue.jsを使用した大規模なプロジェクトではよく使われている

Nuxt.jsプロジェクトにジョインしていく際にデータのやりとりなどで必須となる知識なので、超ざっくりまとめてみました!笑

Vuex(ビューエックス)とは

Vuexを使用すると、アプリケーションのデータを管理することができ、そのデータを一元的に管理することができます。

また、データを効率的に処理することができたり、アプリケーションのデータを安全に保存することもできます。

日本語ドキュメントを見ると、下記のように記載されています!

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。

https://vuex.vuejs.org/ja/

正直、私は状態管理パターン自体はまだよくわかっていません。下記の例がわかりやすかったです。

例えば、ショッピングサイトをVue.jsで作成して、ユーザーが欲しい商品を買いものカゴに入れたり出したり、入れたり出したり、入れたりしたら、カゴの中身は変わりますよね?でも、カゴの中身の状態を複数のパーツで表示させたい場合、(マイページ、購入画面、ヘッダーとかに表示したカートアイコンにカゴに入れたアイテム数とか・・・etc)同じ共通のデータを使えたら、それぞれのページやパーツで変更を加えてもマイページで表示したカゴにはアイテムが3件、購入画面で表示したカゴにはアイテムが2件、ヘッダーに表示したカートアイコンのアイテム数が5件、

なんていう不整合が起きなくなるのです。参照も変更も各コンポーネントからアクセスできる場所に管理するので、マイページでデータを変更しても、他のパーツも同じデータを参照しているので、同じ状態を参照できます。

https://qiita.com/aya02/items/933c6c55b8e4801f150a

要するに違うページから見てもその持っているアイテムの数は変わらないようにうまいことやってくれるってこと。

Vuexの主な役割

Vuexには、以下の役割が含まれています。

actions

コンポーネントから実行されて、APIの実行や、次の説明するmutationsの実行を行う。

例:お気にり追加ボタンを押す等

mutations

actionsから受け取った値をstateに保存する

例:お気にりを追加したらその数をお気に入り総数に追加する

state

状態のデータを保存しておく場所

例:お気に入りの総数を保存している場所

getters

stateに保存された値をコンポーネントに返す

例:お気に入り総数をお気に入りアイコン横に表示する

どんな時に使用する?

大規模なプロジェクトの場合だと、必要。逆に小規模なプロジェクトだとコードが冗長になってしまうので必要ない。

Vuexを使用するとなぜ便利?

コンポーネント外のデータを扱いたい場合に便利。

まとめ

Vue.jsを使用する大きなプロジェクトでは必須となる知識です。

初見では何もわからないかもしれませんが、実際にプロジェクトに参加し、実務で扱うことで知識が深まります。現在は、この学習過程を前向きに受け入れています!

まずはVue.jsのチュートリアルなどで小さな実装から体験してみると良いでしょう。

【参考書リンク】

-Web制作
-