Question related to a document topic on usage of Axios

[Ben Hayat]

Hi;

As I was looking at the following page
https://quasar.dev/quasar-cli/ajax-requests
I see how the global $axios was declared in boot file and the next sample how global $axios was used in a component.
What confuses me is the third sample related to using Axios in Vuex store.

Why is Axios imported again in Vuex store and not using the global $axios object that was declared in boot file where all the options were set during initial boot process?

What’s the best guideline/pattern to use Axios with Vuex store?
Thanks!

[dobbel]

@Ben-Hayat

Why is Axios imported again in Vuex store

I think this is because Vuex actions, mutations etc. can be defined outside of the Vuex store in separate .js files ( quasar’s default ). And those files don’t have access to the this.$axios ( because of the isolated scope of an imported js module). If you would define the the actions, mutations directly in the vuex store you can use the global axios ref.

See here for an example of isolated scope when using import:
https://stackoverflow.com/questions/38270470/javascript-scope-when-importing-modules

[Ben Hayat]

@dobbel said in Question related to a document topic on usage of Axios:

I think this is because Vuex actions, mutations etc. can be defined outside of the Vuex store in separate .js files ( quasar’s default ). And those files don’t have access to the this.$axios ( because of the isolated scope of an imported js module)

Thanks for the reply;
When you refer to “Quasar default”, are you referring to how Quasar CLI created the “module-example” folder in the store folder as following?

And if I create a single store file, i.e. authStore where it holds State, Mutations, Actions and Getters, then I can use this.$axios ?

[s.molinari]

this.$axios is only available within Vue’s context (i.e. .vue component files). Vuex is not within Vue’s context, so you have to import axios into Vuex (.js) files to use it.

It’s actually better to also export the instance you had created in the boot file, should you have set up the instance, i.e. with a default url or any header stuff.

https://quasar.dev/quasar-cli/boot-files#Accessing-data-from-boot-files

Scott

[Mausino]

Hi, @s-molinari @dobbel @Ben-Hayat

Sorry if is not part of this conversation, but also is connected with axios…
On vue app created by Vue CLI is it working… but doens’t in Quasar

i need to know if i should create bug in quasar github… but i am not sure… should you look on issue which i asked here on forum? https://forum.quasar-framework.org/topic/7560/api-vue-warn-error-in-created-hook-promise-async-error-request-failed-with-status-code-404

Thank you so much for your help!
Miky