【Vuex】Storeの各プロパティ引数メモ

概要

VuexのStoreの各プロパティのfunctionの引数が忘れがちなので私的メモです。

	第1引数	第2引数	第3引数	第4引数
getters	state	getters	rootState	rootGetters
mutations	state	payload	--	--
actions	context	payload	--	--

補足説明

getters

getters: {
    //stateを取得
    isLoadingError: state => {
      return !state.serverAuth.loading;
    },
    //他のgetterを参照することもできる
    isAbleChartLoad: (state, getters) => {
      return getters.isInputedBoard && getters.isInputedDays
    }
},
modules: {
  moduleA: {
    //ネストしているモジュールがある場合にも親のstate、gettersを取得できる
    getters: {
      isIncluded: (state, getters, rootState, rootGetters) => {
        return rootState.listItems.includes(state.item);
      }
    }
  }
}

mutations

mutations: {
    //mutationはstateの変更ができる。第二引数にはデータペイロードを渡すことも可能
    END_LOADING_WEBHOOK_BY_INDEX(state, index) {
      state.webhookBoards[index].loading = false;
      state.webhookBoards[index].status = "";
    }
}

actions

contextは以下が使用可能。

context.state => ローカルstate
context.getters => ローカルgetters
context.rootState => rootのStoreにおけるstate
context.rootGetters => rootのStoreにおけるgetters
context.commit => mutationを実行するためのcommitメソッド
context.dispatch => actionを実行するためのdispatchメソッド

必要なものをes6の引数分割束縛を使うと以下のように省略してかける

actions:{
  initialLoad({state, commit, dispatch}, data) {
    state.loading = true; //context.stateをそのまま利用可能
    dispatch('loadGraph', data)  //他のactionをdispatchすることもできる
      .then(data => {
        commit('SET_GRAPH'); //context.commitをそのまま利用可能
      })
      .catch(err => {
        commit('SET_GRAPH'); //context.commitをそのまま利用可能
      });
  }
}