VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる

2018-10-09T21:54:48+09:00

最近のJavaScriptのフレームワークを勉強したての人の場合、Vue.jsなどはすぐ理解できても、Fluxの概念やVuexのStore等でわからなくなってしまうことはありませんか？そういう場合、Nuxt.jsを触りつつNuxt.jsのマニュアルを見ると非常に簡潔で理解しやすいです。

具体的には下記のページです。ここを参考にしながら説明していきます。先にリンクの説明を見たい場合は「モジュールモード」の方を見るとより分かりやすいと思います。当記事の内容もそちらをベースに進めていきます。

Vuex ストア - Nuxt.js

そもそも何に使うものなのか？

Storeはアプリケーション全体の状態を管理してくれるものです。具体的にはログインしているユーザーの情報などが一番わかり易いと思います。

具体的にどうやって使うのか

Nuxt.jsの場合、まず store/index.js に状態の定義を行います。

export const state = () => ({
  user: null
})

また、その下に上記の状態を更新するための mutation という処理を書きます。

export const mutations = {
  login(state, user) {
    state.user = user
  },
  logout(state) {
    state.user = null
  }
}

上記のようなファイルを作っておけばNuxt.jsでは勝手に読み込まれます。

あとは適当などこかのコンポーネント内で上記のmutationを呼び出せば状態を更新できます。

this.$store.commit('login', user)

コンポーネント内で参照したい時は下記のようになります。

{{ $store.state.user.name }}

非常に簡単ですね。

何のメリットがあるか？

アプリケーション上のどこからでもアクセスできるというのが一番のメリットとしてあげられるのではないかと思います。今回の例ではいちいち下層のコンポーネントにユーザー情報をプロパティ経由で渡さなくても、ユーザー情報にアクセスできます。

例えばStoreを使っていない場合、全体の layout.vue がありそこにユーザー情報を持たせるとすると、そこから TheHeaderNavi にユーザー情報をプロパティで渡し、更にその中の TheLoginButton 、更にその中の TheLoginModal にユーザー情報を渡さなければなりません。

しかもTheLoginModalでログインしたら、 @logined のようなイベントでログインした情報を受け取るというバケツリレーを最初に戻るまで繰り返さなければなりません。しかも他のページ上の画面でもユーザー情報を表示したいところがあれば全部同様にしていかなければなりません。気が狂いそうなほど非常に面倒です。

Storeであればこれらは全部不要となります。開発者の負担がまるで違いますので、超小規模アプリケーション以外ではほぼ必須ではないかと思います。

Nuxt.jsの場合ファイル分けも非常に簡単

ユーザー情報だけでなく、例えばチャットのページでは発言一覧、地図のページでは地図上のマーカー情報一覧などをStoreに置いておきたいところなども出てくると思います。この場合先程紹介したマニュアルのページで解説されていますが、用途ごとにファイルを分けることもNuxt.jsでは非常に簡単です。

具体的にどうするかというと、本当にただファイルを分けて定義するだけです。例えば store/chat.js を作るとすると、参照する時は

のような感じで、commitは

this.$store.commit('chat/add', post)

という感じで、非常に簡単です。

ReactのReduxと比較すると？

ReactのReduxを使ったことがある方は分かると思いますが、結構面倒です（とはいえそれでもプロパティで数珠つなぎにするよりははるかに楽ですが）。だいぶ前に同様の記事を書いています。そこでは概念しか書いていませんが実際に実装すると結構手間で、管理も大変です。

ReactにReduxを組み合わせると何が楽なのか

それに比べNuxt.jsのマニュアルになり、ぐんとわかりやすくなっていると思います。Reduxだと他にもactionsとかreducerとかファイル数も多く、面倒になっている部分だと思います。Nuxt.jsだと先程の説明ではstateとmutationsしか出てきておらず、最小限の実装だとほんとうに単純明快です。

もちろんこの簡単さのために逆に犠牲にしている部分はあると思うのですが、それでも個人であれこれぱぱっと何か作りたいときになどにはこれくらいで十分でスピーディーに物事を進められると思います。

まとめ

とにかくこのNuxt.jsのStoreから理解を進めていくと簡単で分かりやすいです。多分ここを読んでちらっと理解しておくと、VuexやReactでStoreを使う時なども多少理解しやすくなっていると思います。

今までよく理解できなかった、という方がいればぜひこの機会にもう一度確認してみてください。