📖
Vuex Store の引数 | Vue3 + Vuex4
Mutations
定義方法
index.js
state: {
scale: 0,
},
mutations: {
// 引数なし
increment(state) {
state.scale++;
},
// 引数 1 コ
plus(state, plus) {
state.scale += plus;
},
// 引数 2 コ以上
plusMinus(state, { plus, minus }) {
state.scale = scale + plus - minus;
},
},
使い方
SampleComponent.js
methods: {
doIt() {
this.$store.commit('increment');
this.$store.commit('plus', 10);
this.$store.commit('plusMinus', { plus: 10, minus: 5 });
},
},
Getters
定義方法
index.js
state: {
scale: 0,
},
getters: {
// 引数なし
counter(state) {
return state.scale;
},
// 引数あり *メソッドスタイルアクセス
getCalcedCounter: (state) => (plus) => {
return state.scale + plus;
},
// (参考) 他の getter を使う
counterX(state, getters) {
const current = getters.counter; // ← state.scale
return current;
},
},
使い方
SampleComponent.js
methods: {
doIt() {
this.$store.getters.counter;
this.$store.getters.getCalcedCounter(10);
// ^^^^^^^^^^^^^^^^
// メソッドであることに注意
this.$store.getters.counterX;
},
},
Actions
定義方法
以下は、上記の mutations を持つこととする。
index.js
state: {
scale: 0,
},
actions: {
// 引数なし
doIncrement({ commit }) {
commit('increment');
},
// 引数 1 コ
doPlus({ commit }, plus) {
commit('plus', plus);
},
// 引数 2 コ以上
doPlusMinus({ commit }, { plus, minus }) {
commit('plusMinus', { plus, minus });
},
// (参考) 他の actions を使う
doOtherAction({ dispatch, commit }) {
dispatch('doIncrement');
commit('increment');
},
},
使い方
SampleComponent.js
methods: {
doIt() {
this.$store.dispatch('doIncrement');
this.$store.dispatch('doPlus', 10);
this.$store.dispatch('doPlusMinus', { plus: 10, minus: 5 });
this.$store.dispatch('doOtherAction');
},
},
補足
Actions ハンドラーの第一引数は (Vuex) Context というオブジェクトで、次のようなキーを持っている.
{
state,
rootState,
commit,
dispatch,
getters,
rootGetters
}
Mutations と Actions の違い
Mutations は同期処理だが、Actions は任意の非同期処理を含むことができる.
もし、Actions が非同期処理を含み、かつ、処理の完了タイミングを知りたい場合、それは Promise を返すようにしなければならない.
なお、dispatch は Promise を処理することができる.
actions: {
// 非同期処理
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation');
resolve();
}, 1000);
});
},
// actionA 呼び出し
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation');
}),
}
}
参考
Discussion