Vue prototype Axios

Question

I am new to vue and Quasar.

Now, I got how Vue works vaguely,

I was trying to comprehend the boilerplate code which we get when we init Quasar

While initiating, I asked it to integrate axios and veux from cli

Now I was trying to comprehend the boiler plate which is when stumbled upon axios.js file inside plugin folder

The file contain the following code

import axios from 'axios'

export default ({ Vue }) => {
  Vue.prototype.$axios = axios
}

1. Can someone tell me what does this code do? Based on my understanding, it seems like it adds a method to vue known as axios so that we can use it globally?

2. What could be the reason for using $axios? i.e Vue.prototype.$axios = axios, Can't we just do Vue.prototype.axios = axios? since it is eventually creating a property?

3. If we can use axios globally (without importing it or in other words writing import axios from "axios"). Then how can we do it?

4. I am guessing this will only work on .vue file?

5. I am used to creating a helper function where I do all the network request, usually the helper function file would be networkRequest.js where I would import axios and make requests. That networkRequest.js is the single point from where all the requests are made. Since Vue.prototype.$axios = axios would only work on .vue file? Does it still make sense to use axios plugin which comes in the boiler plate

Glomeration

I suspect most of your answers will be answered here: Adding Instance Properties – Carrion

this solved my concerns. Thanks :) – Glomeration

For me app.prototype was unaccessible in a boot file, so to add my method in the boot file I had to do the following: app.config.globalProperties.$newFunction = () => {}, if you want to get access to a quasar function inside your boot file you can use the following: app.config.globalProperties.$q.notify(...) – Keep

Answer 1

1. Yes, you are correct. It creates a global instance of axios that is available for all the components of Vue. So, instead of importing axios in multiple files and creating multiple instance of it, you can create ONE instance and put all the common properties together for that instance. For example, you can define interceptors and urls in one place rather than having them spread out all around.

2. Vue defines it very well in their website

No magic is happening here. $ is a convention Vue uses for properties that are available to all instances. This avoids conflicts with any defined data, computed properties, or methods.

3. You can do it in multiple ways. If you are in a .vue file, you can directly access it through this.$axios(). If you want to access it through Vuex stores, you either need to pass the context of the component or you can use it in JS files import Vue from 'vue' and use it like Vue.prototype.$axios()

4. It will also work in JS files. Follow the step in number 3.

5. Refer to number 4.

Idalla