【vuex】名前空間付きモジュールを使っている場合のmutation/action/state/getterの呼び出し方まとめ

プログラム全般

いつも混乱するのでまとめました。

モジュール | Vuex
Vue.js のための集中状態管理
nuxtjs.org
Nuxt.js official website

前提

  • バインディングヘルパー(mapState、mapGetters、mapActions、 mapMutations)を使わない
  • NuxtJSで検証
    • だけど、NuxtJS使って無くても同じはず

state(ステート)

定義(hogeモジュールとして定義)

export const state = () => ({
  tasks: [],
});

呼び出し方

this.$store.state.hoge.tasks;

getters(ゲッター)

定義(hogeモジュールとして定義)

export const getters = {
   // 中身は適当
   getTask: (state) => {
     return state.tasks[0];
   },
 };

呼び出し方

this.$store.getters['hoge/getTask'];

mutations(ミューテーション)

定義(hogeモジュールとして定義)

export const mutations = {
  setTasks(state, tasks) {
    state.tasks = tasks;
  },
};

呼び出し側

this.$store.commit('hoge/setTasks', ['piyo', 'piyo2']);

actions(アクション)

定義(hogeモジュールとして定義)

export const actions = {
  fetch({commit}, {id}) {
    //
    commit('setTasks', ['hoge', 'fuga']);
  },
};

呼び出し側

this.$store.dispatch('hoge/fetch', {id: 1});

まとめ

種類呼び出し方
statethis.$store.state.モジュール名.state名
gettersthis.$store.getters[‘モジュール名/getters名‘]
mutationsthis.$store.commit(‘モジュール名/mutations名‘)
actionsthis.$store.dispatch(‘モジュール名/actions名‘)

まとめてみましたが、微妙に形式が違っていてやっぱり覚えにくい、、、

コメント

タイトルとURLをコピーしました