I am figuring how to pass callback to vuex action
I tried below code but not working. The code run before I fire it
src/store/modules/web3.module.js
import Web3 from "web3";
const state = {};
const getters = {};
const mutations = {};
const actions = {
async test(context, confirmCallback, rejectCallback) {
confirmCallback();
rejectCallback();
}
};
export default {
state,
getters,
actions,
mutations
};
App.vue
<template>
<div id="app"></div>
</template>
<script>
import { mapActions } from "vuex";
export default {
name: "App",
methods: {
...mapActions(["test"]),
onModalOpen() {
console.log("open");
},
onModalClose() {
console.log("Close");
},
},
async created() {
let result = await this.test({
confirmCallback: this.onModalOpen(),
rejectCallback: this.onModalClose(),
});
},
};
</script>
The issue takes place in 2 places:
() at the end when passing it through an object:Solve the payload issue
An action has 2 parameters, first comes the context which is an object that contains the state, mutations etc. then comes the payload which is an object aswell
const actions = {
async test(context, {confirmCallback, rejectCallback}) {
confirmCallback();
rejectCallback();
}
}
Solve the decleration issue
To solve the decleration issue simply remove the () at the end like shown below:
async created() {
let result = await this.test({
confirmCallback: this.onModalOpen,
rejectCallback: this.onModalClose,
});
},