6

In main.js, I set axios as a global function.


//main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';
const app = createApp(App);
app.config.globalProperties.$http = axios;
app.mount('#app');

The thing is how do I call this function in a component using composition api?


<script>
export default {
  setup() {
   //how do I call the `axios` global function?
 };
</script>
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
刘嘉琪
  • 129
  • 1
  • 1
  • 8

2 Answers2

8

First off, is it not possible to simply import axios in the components where it's needed? Using global properties is discouraged in Vue 3 with the composition API. With that said, this is still possible in a few ways:

Importing where needed

The ideal method, as I mentioned earlier, is simply to

import axios from 'axios'

in components where it is needed.

Provide/inject

If, for whatever reason, you do need to provide Axios globally from your app, another way to do so is to use the Provide/Inject pattern.

In your App.vue:

import { provide } from 'vue'

export default {
    setup() {
        provide('axios', axios);
    }
}

And in whatever components need it:

import { inject } from 'vue'

export default {
    setup() {
        const axios = inject('axios');
    }
}

getCurrentInstance() (discouraged)

Per the Vue documentation,

Usage of getCurrentInstance is strongly discouraged in application code. Do NOT use it as an escape hatch to get the equivalent of this in Composition API.

However, if you really want to maintain it as a global property, you can use it as follows:

import { getCurrentInstance } from 'vue';

export default {
    setup() {
        const app = getCurrentInstance();
        const axios = app.appContext.config.globalProperties.$http;
futur
  • 1,673
  • 5
  • 20
  • All points are valid, however I have some concerns with defining `import axios` as the "ideal solution": when it comes to modularization a core principle is to reduce internal coupling among them. This means that a module should not depend (thus include) directly another module but should rather ask the app to "provide" the single responsible for specific logic. Thus provide / inject solution looks more appropriate to me, except that if you want to implement it with TS you will end up coupling modules anyway (consumer module needs to import the injection key anyway before injecting) – Marco Gagliardi Nov 04 '22 at 13:43
-7

You can call it like so:

this.$http.get('http://127.0.0.1/api')
Azeame
  • 2,322
  • 2
  • 14
  • 30
Roberto Stnaley Reyes
  • 1