Vuex action method completes without returning a value

Question

I've come across a situation in my Vuex action where the console.log() is displaying an undefined output. Here's the method in my Vuex action:

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

And here's the method to call the Vuex action:

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

Can anyone point out what might be missing or causing the undefined output in the console?

Answer 1

Answer №1

There seems to be a mistake in the parameters passed to your action.

The correct format should be ({ commit }, title) instead of ({ commit, title })

Alternatively, you could call it with an object containing the property title.

Answer 2

There seems to be a mistake in the parameters passed to your action.

The correct format should be ({ commit }, title) instead of ({ commit, title })

Alternatively, you could call it with an object containing the property title.

Answer 3

When using Vuex actions, make sure to pass two parameters: the context object { commit } and the payload (in this case, title)

Update your action declaration as follows:

const actions = {
  async searchByTitle({ commit }, title) {
    console.log(title);
    //add your other code here
  },
};

Answer 4

When using Vuex actions, make sure to pass two parameters: the context object { commit } and the payload (in this case, title)

Update your action declaration as follows:

const actions = {
  async searchByTitle({ commit }, title) {
    console.log(title);
    //add your other code here
  },
};