Vue.jsではdataオプションにあるデータの値によってDOMを再描画させて要素を切り替えて表示させるというケースが多々あるかと思います。ただし、コンポーネントが多くなってきたり、構造が複雑になってくるとそのデータの管理が大変になります。そんな時に「Vuex」という拡張ライブラリを採用することで、複数のデータを一括でアプリケーションの状態管理ができるようになります。   今回はVue CLIで作成したVueプロジェクトにてVuexを使ったアプリケーションの状態管理を行うサンプルを見ていきたいと思います。  

アプリケーションの状態管理をするための拡張ライブラリのVuex

Vue.jsでアプリケーションの状態管理をする際には、拡張ライブラリである「Vuex」を使うことになります。Vue CLIですとインストール時にまとめて追加できますのであらかじめ設定しておきます。詳しくは過去記事「vue-cli 3系への移行と新規Vue.jsプロジェクト作成とビルド方向まとめ」を参考に。Vue CLIを使わず、スタンドアローンなどの場合は下記のコマンドでライブラリをインストールします。

$ npm install vuex

   

基本的なアプリケーションの状態管理の流れ

Vuexのインストールが完了すれば、まずはmain.jsへ下記の方にVuex用のスクリプトを読み込むように追記していきます。合わせてインスタンス内にもVuexを追記します。 【main.js】

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
 store,
 render: h => h(App)
}).$mount('#app')

  次に、Vuexを設定するスクリプトファイルである「store.js」に「state」と呼ばれるデータの登録や、そのデータを更新する関数などを設定してきます。まずは、Vue内でVuexを実行するように記述し、その中で各項目を記述していきます。   ちなみに今回はコンポーネント内に設置されたボタンをクリックするとアプリケーションの状態が変化し、それによってDOMが再描画され表示が変わるというケースで見ていきます。まずはコードを確認してみましょう。 【store.js】

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

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
  isTextColor: false
 },
 mutations: {
  mutateTextColor(state) {
   state.isTextColor = !state.isTextColor;
  }
 },
 actions: {
  commitTextColor(store) {
   return store.commit('mutateTextColor')
  }
 }
})

  上記のようにstore.jsでは「state」「mutations」「actions」というものがあります。アプリケーションの状態管理を行う上でこれらの意味を理解しておく必要があります。  

state	Vueインスタンスでいう「data」オプションのようなもので、初期値としての文字列や配列・ブーリアン値などの値が入ります。
mutations	stateの値を更新します。stateの値を更新できるのはmutationsからのみとなります。commit関数で呼び出されます。
actions	登録されたmutationsを実行します。commit関数の引数で実行するmutationsを指定します。コンポーネントからはdispatch関数で実行できます。

  このように、データは「actions」→「mutations」→「state」と流れていき、最後にコンポーネントのDOMが再描画されるイメージになります。ですので上記の例ですと、まずはstateの値に初期値のデータを入れていきます。そして、mutationsでstateの値を変えるためのデータを設定します。最後にactionsでmutationsを実行するための関数を記述します。   これでデータが流れる経路は整いましたが、このままですとactionsを実行しないとstateの値を変えることができません。なので、コンポーネント側からactionsを実行するためのイベントを下記のように設定していきます。 【App.vue】

<template>
 <div id="app">
  <button @click="color_change()">クリック！！</button>
  <p 
   :class="[
    getState === true ?
     'color-red' :
     'color-black'
   ]">ボタンクリックでテキストの文字色が変わります
  </p>
 </div>
</template>

<script>
 export default {
  name: 'App',
  computed: {
   getState() {
    return this.$store.state.isTextColor
   }
  },
  methods: {
   color_change() {
    this.$store.dispatch('commitTextColor')
   }
  }
 }
</script>

<style lang="scss">
 .color-red {
  color: #f00;
 }
 .color-black {
  color: #000;
 }
</style>

  コンポーネント側のテンプレートには、状態を変更するためのトリガーとなるボタン要素と、状態変化が反映される要素を用意しています。ボタン要素にはクリックイベントを設定し、再描画される要素にはstateの値を取得して条件分岐させるロジックを用意しておきます。   スクリプトでは、まず「computed」の算出プロパティで、stateの値を取得して返すための関数を作成します。コンポーネントにおいてはstateの値を「this.$store.state.[STATE_NAME]」で取得することができます。   次に「methods」で先ほどstore.jsに用意したactionsを実行するための関数を用意します。actionsを呼び出すには「this.$store.dispatch()」で実行でき、引数に該当するactionsの関数を指定します。このmethodsで指定した関数を先ほどのボタン要素のクリックイベントで発火させます。   最後のstyleでは、今回ですとstateの値で再描画されると同時にclass名を切り替えているので、それぞれのスタイルを指定しておきます。これでブラウザで確認すると、stateの値が変わり、その度にDOMが再描画されているのが確認できます。デベロッパーツールでも値の変化が見れますね。  

---

  今回は基本的なところで簡単なサンプルになりましたが、実際はこのような状態管理をいろんな値を使って行なっていくことになります。使いこなすとかなり便利なものですので、ぜひマスターしておきたいところですね。