Cannot read property '$axios' of undefined nuxtjs vuex

Question

I stumbled upon this bug in my codebase and trying to see if anyone can fix it.

following is my listings/actions.js

export const fetchFeaturedListings = ({ commit }) => {
  this.$axios.get("/featured").then(response => {
    console.log(response.data.data);
    commit("listings/setFeaturedListings", response.data.data);
  });
};

I am constantly getting the following error.

Cannot read property '$axios' of undefined

I've searched everywhere, and still not able to find an answer. Hope someone can help.

Answer 1

For arrow function vuex can't set 'this'. Try to use standart functions.

export const fetchFeaturedListings = function({ commit }){
  this.$axios.get("/featured").then(response => {
    console.log(response.data.data);
    commit("listings/setFeaturedListings", response.data.data);
  });
};

Answer 2

You're using an arrow function, which means this comes from the outer scope. If $axios doesn't exist in that outer scope, this is why you see this error.