Method in vuex action return undefined

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 ??

2 answers

  • answered 2020-07-14 06:43 Badgy

    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.

  • answered 2020-07-14 06:44 camaulay

    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
      },
    };