Vuexについて説明したい

※この記事は、KCSアドベントカレンダー12月23日の記事です。

はじめに

はじめまして、一年のsupercell(twitter: @undermountainafu)です。この記事では自分が学習しているvuexについて説明していきます。

vue.jsについて

vuexの説明に入る前に、まずはvue.jsについて簡潔に説明しようと思います。vue.jsとは、フロントエンドで用いられるJavaScriptのフレームワークです。他のフレームワークとしては、ReactやAngularがあります。vue.jsの面白いなと思った特徴は、コンポーネント指向です。この指向は、アプリケーションをコンポーネント機能ごとに分割することで、コードの再利用、保守を容易にすることができます。他にも色々な機能がありますが、詳しくはドキュメント見てください。
vuexドキュメント

vuexとは

お待たせしました(?)、vuexについて説明していきます。これは、vue.jsを用いたアプリケーション開発の際に用いられる開発フローです。要するに、データの流れを一方向に決めようってことです。vuexでは、stateをグローバル変数のように設定します。そのため、どのコンポーネントからでもstateの値を参照することができます。stateの状態を変更したい場合は、action->mutation->stateという流れで行います。下図は一連の流れの参考図です。

vuex
図. vuexの流れ

なぜ使う?

アプリケーションでは、view、action、stateで一方向の流れになっています。しかし、共通の値を共有するコンポーネントがある場合や、一つの値を複数のviewに表示させたい場合などでは、コードが複雑になってしまいますし、状態の管理が煩雑になってしまいます。具体的には、vuexを使わない場合propsとして状態を渡しますが、その状態は親から子にしか渡すことができません。
そこで、状態の管理を楽にするためにvuexを使うのです。
vuexがどんなもので、なぜ使うかを理解した後は、各機能について簡潔に説明していきます。

state

stateは、ストアで管理される状態であり、mutation以外では変更できません。

action

actionでは、mutationの登録(commit)や、データの加工などの非同期処理を行います。actionはdispatchにより呼び出されます。また、外部APIとの通信もここで行います。蛇足になりますが、APIとの通信は、axiosを用いることが公式により推奨されています。

mutation

mutationでは、stateを変更する処理や、同期的な処理を行います。commitメソッドによって呼び出すことができます。唯一stateを変更することができる機能となっています。

おわりに

余談ですが、この記事のためにvuexのサンプルコードを書いていたのですが、そのコードが動かなかったため、のせれませんでした(雑魚)。コードを直してくれる方募集しています->Missionapp
では、おつかれ三下~!

Posted on