【Nuxt.js v2】storeのstateへのアクセスを簡潔にする(mapState)

mapStateとは

Vuexが提供する機能で、stateへのアクセスをより簡潔に行うことができます。
他にも同様の機能としてmapMutationsやmapAcitonsがあります。

使い方

例えば/store/auth.jsにログイン状態を表すauthenticatedというstateを定義しているとします。
mapStateを使わない場合は、this.$store.state.auth.authenticatedと記述することで参照可能です。(template内ではthis.無し)
同じページ内で何度も記述したり、参照先のstoreモジュールが複数あったりすると、可読性がかなり下がります。

mapStateを使いcomputedに記述することで、変数と同じように参照することができます。
以下の場合、this.authenticatedで、this.$store.state.auth.authenticatedにアクセス出来るようになります。(template内ではauthenticated)

<script>
import { mapState } from 'vuex'

export default {
  computed: mapState({
    authenticated: state => state.auth.authenticated
  })
}
</script>

参照する対象が複数ある場合

computed: mapState({
  authenticated: state => state.auth.authenticated,
  name: state => state.user.name
})

computedに他のプロパティも定義する場合
スプレッド構文...で、mapStateで取得したオブジェクトの中身を展開する必要があります。

computed: {
  ...mapState({
    authenticated: state => state.auth.authenticated,
    name: state => state.user.name
  }),
  hoge: () => 'hoge'
}