axios object in store parameter from custom boot file

[samodraland]

Hi guys,

I made custom boot file and want to have axios in it. I found that $axios object comes from “store” parameter code bellow

export default async ({ app, router, store, Vue }) => {
    console.log('store from custom boot file', store)
}

just wondering:

1. why does $axios (and $router as well) come from store and not from “app” or “Vue” (or “router”) parameter?
2. what is the difference $axios & $router from store and “regular” this.$axios & this.$router from vue file?
3. If I want to use $axios in my boot file just straight forward store.$axios.get("/path") or do I need to import?

import axios from 'axios'

btw Quasar Framework is really awesome! I loved it from the first time I knew it

[dobbel]

@samodraland

1. It does not come from the store but is passed to the store so it’s just as easily available as in Vue components

2. nothing it’s the same instance ( default)

3. axios needs a boot file to setup. But if you want to use axios instance in another boot file you need to change a couple of things in the axios boot file.

// axios.js boot file
import axios from 'axios' 
const axiosInstance = axios.create({ 
  baseURL: 'https://api.example.com' 
})
export default ({ Vue }) => {
  Vue.prototype.$axios = axiosInstance
}
export { axiosInstance }

then you can import the axios instance in another boot file( or any .js file)

// other boot file
import axios from 'src/boot/axios.js'
ect...

See: https://medium.com/quasar-framework/adding-axios-to-quasar-dbe094863728

[metalsadman]

The prototype will be of same instance, so yeah, you can use this.$axios/this.$router in store just be sure you’re using function some action()... instead of arrows someaction= (..) => {...} when you defined your functions. I’m not sure why $axios was passed to store tho, other than for convenience.

[samodraland]

Thank you for the explanations @dobbel and @metalsadman