はじめに

Vue.js、React.js、AngularJS等フロントエンドのフレームワークが近年すごく充実していますね。
そんな中、うちのチームではVue.jsを用いた開発を行っています。

課題

Vue.jsを使う上で、コンポーネントをうまく分割するのは非常に重要な一方で、
コンポーネントが細かくなっていくにつれ、共通の処理が重複することも多くなっていきます。

基本的には、propsを用いて、親子のデータのやり取りをしていくかと思いますが、
親子、孫、ひ孫・・・・と階層が深くなるにつれ、props地獄に陥り、冗長な記載や保守性の低下等も引き起こしかねません。

Vuexとは？

Vue.js上で動作する、状態管理のパターン＋ライブラリになります。
https://vuex.vuejs.org/ja/intro.html

今回は、プロジェクトのどの画面でもほぼ参照する
・マスタデータ
・loading画面表示用のフラグ
の2つに関してVuexを使った管理にすることにしました。

実装

インストール方法
https://vuex.vuejs.org/ja/installation.html

npm install vuex --save

実装例

Vuex.js・・・Vuexでの状態管理定義
Base.vue・・・すべての親にしているコンポーネント
Sample.vue・・・Base.vueが呼び出す子コンポーネント

Vuex.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    // loadingの表示フラグ
    modal: {
      state: {
        isShow: false
      }
    },
    //マスタデータ
    tags: []
  },
  strict: debug,
  mutations: {
    //loading表示切り替え
    modalShow (state, val) {
      state.modal.isShow = val
    },
    //マスタデータ初期化
    tagRefresh (state, val) {
      state.tags = val
    }
  }
})

Base.vue

<script>
  export default {
    data () {
      return {
        // この変数使ってloadingの表示制御等する
        loading: this.$store.state.modal.isShow,
        tags: this.$store.state.tags,
      }
    },
    created: function () {
      //APIからマスタデータ取得
      var tagsResponse = hogehoge()
      this.$store.commit('tagRefresh', tagsResponse)
    }
  }
</script>

Sample.vue

<template>
  <!-- tagsのtagCategory,tagValueを絞ったnameを取得 --> 
  {{$store.state.tags[tagCategory][tagValue].tag_name}}

</template>

<script>
  export default {
    created: function () {
      //loading：ON
      this.$store.commit('modalShow', true)

      /* APIでのデータ取得等各画面の処理 */
      ・・・・

      //loading：OFF
      this.$store.commit('modalShow', false)
    }
  }
</script>

使ってみて

子のコンポーネントどこからでもマスタデータを参照でき、非常に使い勝手があがりました！

また、マスタデータの取得が重複して行われることも無くなったのが非常に大きいです。

冗長なloadingの表示制御等も、フラグのON/OFFのみですべて管理できるようになり
非常に簡潔に実現することができました。

一方、何でもかんでもVeuxに保持するよう対応してしまうと、コンポーネント間の依存性が高くなりすぎたり、バグの原因にもなる為、本当に全てのコンポーネントが持つべきもののみで活用するよう、チーム内ではルールづけしています。

Tweet

Pocket