Nuxt.jsのdataはvuexのstate,gettersで管理しよう

はじめに

vueinstanceでは親子component同士でdataを通信をする場合はProps/$emitcoやcomponent同士でデータ通信をするためにはEvent Busを使うのが一般ですがこのように複雑なdata通信を簡単に通信することができる考え方がVuxです。

Vuexとは

ざっくりですが下記のイメージ図のように中央管理所からデータを必要な時呼び出しして使えるイメージです。

自分のイメージだと親と子component同士関係なく中央管理所からdataを管理し必要な時使うのがVuexでつまり中央管理所はVuexとのことです。

公式からの説明は下記です。

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 また Vue 公式の開発ツール拡張と連携し、設定なしでタイムトラベルデバッグやステートのスナップショットのエクスポートやインポートのような高度な機能を提供します。
https://vuex.vuejs.org/ja/

vuex使い方

nuxtインストールは公式サイト参考　https://ja.nuxtjs.org/guide/installation
nuxtをインストールしたらvuexをインストールします。

$ npm i vuex

nuxtのプロジェクトを作成すると直下にstoreフォルダが作成されるのでstore直下にindex.jsを新しく作って下記のサンプルコードのようにvuexをimportして必要なdataの登録をします。

store/index.js

import Vuex from 'vuex'

export const appStore = () => {
  return new Vuex.Store({
    state: {//data
      myData:{
        firstName: 'thunder',
        lastName: 'fury',
      }
    },
    mutations: {
    },
    actions: {
    }
  })
};
export default appStore

vuexのstateはvueinstanceで言うと下記のdataの役割です。
storeにあるdataを使うためには$storeで呼び出しができます。

.js

<template lang="pug">
  div
    p {{ $store.state.myData.firstName }}
    p {{ $store.state.myData.lastName }}
</template>

これでも良いですがdataのオブジェクトの下層が深い場合など繰り返しコードが多くなってしまうのでその時使うのがGettersです。

Getters実行イメージ

storeのindex.jsにstateのdataをgettersに関数として登録してreturnして使える流れです。

store/index.js.js

getters: {
   myData: state => {
      return state.myData
   },
//上下同じ
getters: {
   myData: function(state) {
      return state.myData
   },

どちらでも書き方は問題ないです。
少しでもにコード量を減らすためにはarrow functionが良いか思います。

登録が終わったら使いたいvueのcomponentmapGettersをimportをしてcomputedにstore/index.js宣言した関数を配列の中に入れます。
そうすることに寄って$store.stateから呼び出したのをcomponent内でで宣言したようにで呼び出しすることができます。

.js

<template lang="pug">
  div
    p {{ myData.firstName }}　//　p {{ $store.state.myData.firstName }}が省略できる
    p {{ myData.lastName }} //　p {{ $store.state.myData.firstName }}が省略できる
</template>
<script>
import { mapGetters } from 'vuex'　//ここにmapGettersをimport
export default {
  computed: {
    ...mapGetters(['myData']) //ここでmapGettersを使う
  }
}
</script>

結果$store.state.myData.firstNameを呼び出した時と同じくなります。
gettersで宣言した関数名を別の名前で受け取りする方法も有って配列で受けたのをオブジェクトで受け取ってのkeyとvalueで割当して使うこともできます。

.js

computed: {
    ...mapGetters({
       testData:'myData'
    })
  }

同じ結果です。
このように別のvueComponentを作ってもわざわざ処理をしなくてもimportだけでdataを呼び出しして使うことができます。グロバル関数系のmutationsやactions もありますが自分はMixinでグロバル化して使っても十分使えるかと思いました。

終わり

ページを遷移した場合データの渡すしや受けるなどサイトが膨大になると複雑になるので中大サイトをもし、vueで作成する場合vuexのgettersを使って簡単に管理するのがどうですか