How to pass to axios a Vuex variable using Nuxt.js?

Question

I actually using Axios in a Nuxt.js project to catch Json file to display it on my website. I would like to use a variable store in Vuex to select the path for my Axios get request.

Here's what my <script> looks like:

<script>
import axios from 'axios'
import vuex from 'vuex'

export default {

  async asyncData({ }) {
    const json = await axios.get(`https://myurl.com/${$store.getters["getPath"]}`)
    return { json }
  }
}
</script>

Pretty sure that isn't the good method to do it. I receive the console error : ReferenceError: store is not defined.

Thanks in advance!

Ejdrien · Accepted Answer · 2019-08-27 15:54:59Z

1

While using the asyncData method you don't have access to this keyword so the asyncData method receives the context object as an argument from which you can get access to Axios, Vuex etc. And thus you don't need to import Axios and Vuex.

export default {
  async asyncData({ $axios, store }) { //here we get Axios and Vuex
    const json = await $axios.get(`https://myurl.com/${store.getters["getPath"]}`)
    return { json }
  }
}

answered Aug 27, 2019 at 15:54

Ejdrien

2,8901 gold badge21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass to axios a Vuex variable using Nuxt.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related