如何使用组合调用自定义全局函数 api | vue3

Question

在main.js中，我将axios设置为全局函数。

//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');

问题是如何在使用组合的组件中调用此函数 api？

<script>
export default {
  setup() {
   //how do I call the `axios` global function?
 };
</script>

Answer 1

你可以这样称呼它：

this.$http.get('http://127.0.0.1/api')

Answer 2

首先，在需要它的组件中简单地导入 axios 是不可能的吗？在 Vue 3 中不鼓励使用 API 组合的全局属性。话虽如此，这在某些方面仍然是可能的：

在需要的地方导入

正如我之前提到的，理想的方法就是

import axios from 'axios'

在需要的组件中。

Provide/inject

如果出于某种原因，您确实需要从 app 全局提供 Axios，另一种方法是使用 Provide/Inject 模式。

在你的App.vue中：

import { provide } from 'vue'

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

并且在任何需要它的组件中：

import { inject } from 'vue'

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

getCurrentInstance()（气馁）

每 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.

不过，如果你真的想把它维护成全局的属性，你可以按如下方式使用它：

import { getCurrentInstance } from 'vue';

export default {
    setup() {
        const app = getCurrentInstance();
        const axios = app.appContext.config.globalProperties.$http;