1. POPOPON

    No comment

    POPOPON
Changes in body
Source | HTML | Preview

はじめに

VuexのmapStatemapActionsって便利ですけど、色々な書き方があってややこしいですね。

例えば、以下のケースでそれぞれ書き方が変わってきます。

  • ヘルパー以外のプロパティも定義したい場合
  • モジュールから値を取ってきたい場合
  • 値にエイリアス(別名)をつけたい場合
  • 値に何らかの処理をほどこしたい場合

本記事では「これだけ覚えていればOK」という書き方を(2種類)ご紹介します。

前提

前提として、userというモジュールに、idageというステートが定義されているとします。

store/user.js
const user = {
  state: {
    id: ''
    age: null
  },
  namespaced: true,
}

また、必要なヘルパー関数はインポートされているとします。

pages/index.vue
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

書き方1(簡易型)

まずは、よく使う簡易的な書き方から。

ストアの値をそのまま使うだけの場合は、以下のように書けます。

pages/index.vue
  computed: {
    ...mapState('user', [
      'id', 
      'age'
    ]),

    // この後にもちゃんと関数を定義できる

  },

これにより、userモジュールのid, agethis.id, this.age で取得できます。

参照先がモジュールじゃない場合は第1引数を省略するだけです。

モジュールじゃない場合
  ...mapState([
    'some', 
    'states'
  ]),

他の3つのヘルパーでも同様に書けます。
(ただしmapMutationsmapActionsmethods内に定義します)

書き方2(万能型)

こちらはあらゆるケースで使える書き方です。
(ただしエイリアスや値の加工が不要な場合は、書き方1より冗長になります)

  computed: {
    ...mapState('user', {
        userId: 'id',
        isAdult: (state) => state.age > 19, // 成人かどうかを Boolean で返す func.
    }),

    // この後にもちゃんと関数を定義できる
  },

書き方1とは異なり、第2引数にはオブジェクトを渡します。
そのオブジェクトには、

別名: '取得したいキー名' あるいは
別名: function (ただし MapGetters 以外)

という形のプロパティを定義します(function を渡す書き方は下で解説します)。

:point_up:のコードでは、

  • this.userIdで user のidが取得できる
  • this.isAdultで「年齢が20歳以上かどうか」が取得できる

ようになっています。

補足(値を加工する場合)

mapState, mapMutations, mapActionsでは、オブジェクトのプロパティに function を渡すことで、値(または関数)の加工が行えます。

mapStateの場合はstateを引数とし、加工した値を戻り値とします。

mapMutations, mapActionsの場合はcommit, dispatchを引数とし、行いたい処理を記述します。
mapActions の実例を置いておきます。

※「値を加工するなら getters に書けばいいのでは?」と一瞬思いましたが、例えば一つのページでしか使わないような値の場合、こうすることで getters の肥大化が避けられそうです。

その他の注意点

  • ヘルパーを書く場所

    • mapState, mapGetterscomputed
    • mapMutations, mapActionsmethods
  • 参照先がモジュールではない場合は第1引数を省略する

  • モジュールがネストしている場合は、モジュール名をスラッシュで区切って指定する。例:”user/photo”

参考

Vuex:mapStateの書き方8パターン+11サンプルコード