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の流れ
なぜ使う？
アプリケーションでは、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
では、おつかれ三下～！