Vuex moduleに定義したstateをコンポーネントで簡単に取得する

const state = {
  message: 'テストです'
};

export default {
  state
};

// 一部抜粋
export default new Vuex.Store({
  modules: {
    moduleA
  }
  actions,
  getters,
  state,
  mutations
});

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      message: function (state) {
        return state.moduleA.message;
      }
    })
  }
};
</script>

...mapState({
  message (state) => state.moduleA.message
})

...mapState({
  message ({ moduleA }) => moduleA.message
})

関連記事

• Vuex 厳格（strict）モードでエラーになるよくある原因

  Vuexの厳格（strict）モードでエラーになってしまう原因でよくあるパターンです。stateに格納した配列をソートして表示するときに、stateの値をcomputedやgettersでそのままソー...

  ---

• Vuex stateを作成して各コンポーネントで参照する

  Vue.jsにVuexを導入するでVuexの導入が完了しました。実際にstoreを作成して、各コンポーネントでその値を参照できるようにします。最初にstoreを作成します。mutations.jsにs...

  ---

• Vuex mutationでstateの値を変更する

  Vuex stateを作成して各コンポーネントで参照するでstateを作成して各コンポーネントで参照できるようになりました。stateはmutationの処理でしか変更できません。コンポーネントからm...

  ---

• Vuexとaxiosを連携する

  Vuex actionでローディングアイコンを表示するで、actionの処理でローディングの表示非表示を制御するmutationを実行するようにしました。ajaxの処理が増えるたびに同じmutatio...

  ---

• Vuex モジュールのactionの処理で別モジュールのactionをコールする

  Vuexのモジュール内のactionの処理で別モジュールのactionをコールする方法を紹介します。ルートのactionの場合、moduleで定義したactionをコールする場合は、以下のようにモジュ...

  ---

• Vuex actionでローディングアイコンを表示する

  Vuex actionの処理でaxiosでajaxを行うでactionの処理を実装しました。actionでajaxを行うときにローディングアイコンを表示させます。Vuexのstoreにloadingの...

  ---

• Vuex actionの処理で別のactionをコールする

  Vuexのactionの処理で別のactionをコールする方法を紹介します。第一引数のcontextを受取り、dispatchメソッドをコールします。dispatchメソッドの第一引数はコールしたいa...

  ---

• Vuex actionの処理でaxiosでajaxを行う

  Vue.js axiosをajaxライブラリとして導入するでVue.jsにaxiosを導入しました。今回は、Vuexのactionでaxiosのライブラリを使ったajaxの処理を行います。最初にaja...

  ---

• Vuex actionでの非同期処理をasync/awaitの実装をする

  Vuexのactionではajaxなどの非同期処理を実装しますが、非同期処理をasync,awaitで実装する方法を紹介します。ファンクションを定義する箇所にasyncを追加しておけば普通にawait...

  ---

• Vue.jsにVuexを導入する

  Vuexを導入する手順の作業メモです。Vuexを利用することにより、各コンポーネントで保持していたデータをstateにまとめられるので、ある程度規模が大きくなっても耐えられるプログラムを作成できます。...

  ---