Vuexのヘルパー関数createNamespacedHelpersの使い方

createNamespacedHelpersを使用することで名前空間付けされたヘルパーを作成できる。

Top.vue

<script>
import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('hoge/Hoge')  // Hoge.jsのStateとActionsを使う

export default {
  computed: {
    ...mapState([
      'aaa',
      'bbb'
    ])
  },
  methods: {
    ...mapActions([
      'ccc',
      'ddd'
    ])
  }
}
</script>

import { createNamespacedHelpers } from 'vuex'
でVuexをインポートし、createNamespacedHelpersで使うように設定しています。

const { mapState, mapActions } = createNamespacedHelpers('hoge/Hoge')
では、createNamespacedHelpersを使ってstoreのHoge.jsにある
StateとActionsを使用することを宣言しています。

そしてStateを参照したいならcomputed内でmapStateを使ってプロパティを参照します。
Actionsを発火させたいならmethods内でmapActionsを使って実行します。

※createNamespacedHelpersを複数のstoreから使う方法に関しては、
以下の記事で紹介しています。
[Vuex]ヘルパー関数createNamespacedHelpersを複数のstoreから使う