Method in vuex action return undefined

Question

I have the following method in my Vuex action:

const actions = {
  async fetchByQuery({ commit, title }) {
    console.log(title);
    //other codes
  },
};

And method to reach to vuex action:

  methods: {
     ...mapActions(["fetchByQuery"]),
    getData(title) {
        console.log("teacher");
      this.fetchByQuery(title);
    }
  }

But the console.log() from action is giving undefined output in the console.

What am I missing here ??

user_9386667 · Answer

You got the parameters inside your action wrong.

({ commit, title }) has to be ({ commit }, title)

Otherwise you would have to call it with an object with a property title.

user_6653426 · Answer

Vuex actions expect two parameters, the context object { commit } and the payload (title, in your case)

Change your action declaration to this:

const actions = {
  async fetchByQuery({ commit }, title) {
    console.log(title);
    //other codes
  },
};