Access Vuex in asyncData function

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 const = () => ({
  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.

Andrew Vasilchuk Andrew Vasilchuk · Accepted Answer · 2019-07-28T17:46:16

The context provides additional objects/params from Nuxt to Vue components. The context is available in special Nuxt lifecycle areas like asyncData, fetch, plugins, middleware, modules, and nuxtServerInit.

Reference

export default {
  asyncData({ store }) {
    const id = store.state.id
    return axios.get(`url${id}`)
      .then(...)
  }
}

Access Vuex in asyncData function

1 Answers