vue - how to pass callback to vuex action

Question

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>

Answer 1

The issue takes place in 2 places:

1. the payload syntax in your store is wrong
2. you are firing the functions with the () 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,
    });
  },