0%

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

Posted:2019.10.03

Vue.jsでactions・mutations・gettersをマッピングしてVuexを使いやすくする

Vue.jsでアプリケーションを開発する際にはステートを管理する場面も多々あるかと思います。ステートの値の取得や、データの更新といった処理をコンポーネント側で行う場合には、適宜オブション内で「this.$store.〜」という形でプロパティにアクセスしていきますが、その際にそれぞれの処理をマッピングすることで、よりコードがすっきりとして可読性のアップや効率よくコードを記述することができます。

 

ステートの管理については過去記事「Vue CLIとVuexでアプリケーションの状態変化を扱う」にて詳しくまとめていますので、こちらも参考にどうぞ。今回はコンポーネント側でステートの値を更新するようなサンプルを元に見ていきます。まずはstore側にstateの初期値をはじめ、actions、mutations、gettersを定義していきます。

【store.js】

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

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
  keyword: "default"
 },
 mutations: {
  mutateKeyword(state, payload) {
   state.keyword = payload;
  }
 },
 actions: {
  commitKeyword({ commit }, payload) {
   return commit('mutateKeyword', payload)
  }
 },
 getters: {
  getStateKeyword: (state) => state.keyword
 }
})

 

そしてコンポーネント側では、ステートの値を更新できるような仕組みを用意しています。まだマッピングされていない状態なので、ステートの値の取得や更新を行うためのプロパティアクセスは「this.$store.〜」で行います。

【Vue】※一部省略

<template>
 <div id="app">
  <p>stateに入っている値</p>
  <pre>{{ getGettersValue }}</pre>
  <textarea ref="input"></textarea>
  <button @click="dataUpdate()">Update!!</button>
 </div>
</template>

<script>
 export default {
  name: 'App',
  computed: {
   getGettersValue() {
    return this.$store.getters.getStateKeyword;
   }
  },
  methods: {
   dataUpdate() {
    const inputValue = this.$refs.input.value;
    this.$store.dispatch('commitKeyword', inputValue);
   }
  }
 }
</script>

 

実際にローカルサーバー上で確認してみるとこんな感じでステートの初期値が確認できるようになっています。

Vue.jsでactions・mutations・gettersをマッピングしてVuexを使いやすくする

 

ここからステートの値を更新してみたいと思います。新たに更新する内容を入力していくと、、

Vue.jsでactions・mutations・gettersをマッピングしてVuexを使いやすくする

 

入力した内容でステートの値が更新されているのがわかります。これでコンポーネント側からステートの値は更新できますね。(詳しくは過去記事「Vue CLIとVuexでアプリケーションの状態変化を扱う」も参考に)ここから、それぞれの処理をマッピングしてコンポーネント内で使えるようにしていきます。

Vue.jsでactions・mutations・gettersをマッピングしてVuexを使いやすくする

 

 

Vuexに用意されたマッピング用のヘルパーを使う

Vuexにはactions、mutations、gettersとそれぞれにコンポーネント内で使うときにマッピングできるヘルパーが用意されています。これらはそれぞれ「mapActions」「mapMutations」「mapGetters」となっており、使うには、まず下記のようにコンポーネント内でimportする必要があります。

【Vue】※一部省略

<script>
 import { mapActions, mapMutations, mapGetters } from 'vuex'
 .......
</script>

 

importするとそれぞれ下記のように使うことができます。マッピングされることで「this.$store.〜」の記述が不要になるのでコードがかなりスッキリします。少ない場合だとあまり気になりませんが、処理が増えてくるとメリットを感じられるのではないでしょうか。

 

mapActionsは基本的にはmethod内に記述します。storeで定義したactionsの関数名を指定します。ここでは配列の形になるので、複数使う場合にはまとめて記述することができます。マッピングしたactionsはcreatedや様々なイベントで発火させたりします。

// mapActionsを使う場合
created() {
 this.ACTIONS_FUNCTION();
}
methods: {
 ...mapActions(['ACTIONS_FUNCTION']);
}

// this.$store.dispatchで行う場合
created() {
 this.$store.dispatch('ACTIONS_FUNCTION');
}

 

mapMutationsも同じく基本的にmethod内に記述します。storeで定義したmutationsの関数名を指定します。ここでも配列の形になるので、複数まとめて記述することができます。マッピングしたmutationsもcreatedや様々なイベントで発火させたりします。

// mapMutationsを使う場合
created() {
 this.MUTATIONS_FUNCTION();
}
methods: {
 ...mapMutations(['MUTATIONS_FUNCTION']);
}

// this.$store.commitで行う場合
created() {
 this.$store.commit('MUTATIONS_FUNCTION');
}

 

mapGettersは基本的にcomputedで使われることが多いようです。storeで定義したgettersのキー名を指定します。マッピングしたgettersはそのままcomputed内でも使うことができますし、直接テンプレート内に出力されたりもします。

// mapGettersを使う場合
computed: {
 ...mapGetters(['GETTERS_KEY']),
 computedGetters() {
  return this.GETTERS_KEY;
 }
}

// this.$store.gettersで行う場合
computed: {
 computedGetters() {
  return this.$store.getters.GETTERS_KEY;
 }
}

 

また、Nuxt.jsの場合であれば、Vuexは「store」フォルダにjsファイルとして格納されますが、storeのファイルをモジュールとして分割していてindex.js以外のファイルがある場合には、マッピングさせるときに、第一引数にモジュール名を指定することが必要になります。

store
 ┣ index.js
 ┣ post.js
 ┣ news.js
 ┣ item.js
 ┗ *******.js


// javascript ※一部省略
methods: {
 ...mapMutations( 'post', ['MUTATIONS_FUNCTION'])
 ...mapMutations( 'news', ['MUTATIONS_FUNCTION'])
 ...mapActions( 'news', ['ACTIONS_FUNCTION'])
}

 

 

コンポーネント内でVuexをマッピングさせて使ってみる

では、これらマッピングさせたサンプルを見ていきたいと思います。まずはmapActionsを使って、ステートの値を更新させる部分を下記のように変更していきます。

【Vue】※一部省略

<template>
 <div id="app">
  <p>stateに入っている値</p>
  <pre>{{ getStateKeyword }}</pre>
  <textarea ref="input"></textarea>
  <button @click="dataUpdate()">Update!!</button>
 </div>
</template>

<script>
 import { mapActions, mapGetters } from 'vuex'
 export default {
  name: 'App',
  computed: {
   ...mapGetters(['getStateKeyword']),
  },
  methods: {
   ...mapActions(['commitKeyword']),
   dataUpdate() {
    const inputValue = this.$refs.input.value;
    this.commitKeyword(inputValue);
   }
  }
 }
</script>

 

実際にブラウザで確認してみると、actionsからmutationsが呼び出され、stateの中身が変わっているのが確認できます。

Vue.jsでactions・mutations・gettersをマッピングしてVuexを使いやすくする

 

もちろんmapMutationsを使って、直接mutationsを呼び出してステートの値を変えることもできます。

【Vue】※一部省略

<script>
 import { mapMutations, mapGetters } from 'vuex'
 export default {
  name: 'App',
  computed: {
   ...mapGetters(['getStateKeyword']),
  },
  methods: {
   ...mapMutations(['mutateKeyword']),
   dataUpdate() {
    const inputValue = this.$refs.input.value;
    this.mutateKeyword(inputValue);
   }
  }
 }
</script>

 

同じくブラウザで確認してみると変わっていますね。

Vue.jsでactions・mutations・gettersをマッピングしてVuexを使いやすくする

 


 

今回はVue.jsのプロジェクトで使うステートの管理をマッピングさせることで、より可読性のある効率的なコーディングを行う方法についてまとめてみました。マッピングさせることのデメリットは特にないかと思いますので、基本的にはこのような形で統一させておくといいのではないでしょうか。

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

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

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

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

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

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

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

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

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

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

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】