Vuex and Axios in asyncData

Question

I want to access my Vuex data in asyncData but I can't. Also I can't seem to be able to use axios module in asyncData.

I tried a lot.

pages/index.vue

export default {
  asyncData() {
    //in my project there's a lot more code here but i think this is enough 
    let id = this.$store.state.id //i know i should prob use getter but no
    //here i want to do an axios req with this var "id" but axios doesnt work
    return axios.get(`url${id}`)
      .then(...) //not gonna write it out here
  }
}

store/index.js

export const state = () => ({
  id: "#5nkI12_fSDAol/_Qa?f"
})

I expect it to get the ID from Vuex and then do a Axios req. Whole app doesn't work.

Ejdrien Ejdrien · Accepted Answer · 2019-07-28T15:11:47

You can't use this in asyncData. The function asyncData gets passed a context object as param which basically represents the this keyword.
First you need to specify what do you want retrieve from the context object and then you can use it.

In your case do something like this:

export default {
  asyncData({ $axios, store }) { //here we get Vuex and Axios
    let id = store.state.id
    return $axios.get(`url${id}`)
      .then(...)
  }
}

Vuex and Axios in asyncData

1 Answers