Vue – mapState使い方

今回は、mapStateについて簡略にメモしていこうと思います。

mapStateとは

コンポーネントが複数のストアのステートプロパティやゲッターを必要としているとき、これらすべてにおいて、算出プロパティを宣言することは繰り返しで冗長です。これに対処するため、算出ゲッター関数を生成し、いくつかのキーストロークを省くのに役立つ mapState ヘルパーを使うことができます

https://vuex.vuejs.org/ja/guide/state.html

• vuexに宣言したstate属性をVueコンポーネントに簡単につないでくれるヘルパーです。
• vuexからmapState関数を持ってきて演算子でつなぎ、配列に拡張して使います。
• vuex storeに宣言されているstateへthis.$store.stateでアクセスしなくても良くなります。
• vueテンプレートでstate内にあるnumをアクセスする時、this.numでアクセスが可能になります。
• stateをthis.$store.stateとして扱ってくれます。

サンプル

// App.vue
import { mapState } from 'vuex';
​
computed() {
    ...mapState(['num'])
}
​
// store.js
state: {
    num: 10
}

• computed()：簡単に言うと、反応型getterです。

<p>{{ this.num }}</p>

• vueテンプレートでstate内にあるnumをアクセスする時、this.numでアクセスが可能になります。

// 完全ビルドでは、ヘルパーは Vuex.mapState として公開されています
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // アロー関数は、コードをとても簡潔にできます！
    count: state => state.count,
    // 文字列を渡すことは、`state => state.count` と同じです
    countAlias: 'count',
    // `this` からローカルステートを参照するときは、通常の関数を使わなければいけません
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

computed: mapState([
  // map this.count to store.state.count
  'count'
])

• マップされた算出プロパティの名前がステートサブツリーの名前と同じ場合は、文字列配列を mapState に渡すこともできます。

注意点

• mapState はオブジェクトを返します。