🗒️

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

1 min read

mapStateとは

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

使い方

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

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

<script>
import { mapState } from 'vuex'

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

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

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

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

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

Discussion

ログインするとコメントできます