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 CLIと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の中身が変わっているのが確認できます。   もちろん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のプロジェクトで使うステートの管理をマッピングさせることで、より可読性のある効率的なコーディングを行う方法についてまとめてみました。マッピングさせることのデメリットは特にないかと思いますので、基本的にはこのような形で統一させておくといいのではないでしょうか。