0%

Programmingプログラミングナレッジ

Posted:2019.05.15

Vue CLIとVuexでアプリケーションの状態変化を扱う

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が再描画されているのが確認できます。デベロッパーツールでも値の変化が見れますね。

Vue CLIとVuexでアプリケーションの状態変化を扱う

Vue CLIとVuexでアプリケーションの状態変化を扱う

Vue CLIとVuexでアプリケーションの状態変化を扱う

 


 

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ