如何使用组合 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

首先，是不是不能简单地在需要的组件中导入axios？在 Vue 3 中，不鼓励使用全局属性和组合 API。话虽如此，这仍然可以通过以下几种方式实现：

在需要时导入

正如我前面提到的，理想的方法只是

import axios from 'axios'

在需要的组件中。

提供/注入

如果出于某种原因，您确实需要从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()(不鼓励)

根据 Vue 文档，

强烈建议不要在应用程序代码中使用getCurrentInstance。不要将其用作逃生舱口，以便在组合 API 中获得等效项。

但是，如果您确实想将其维护为全局属性，则可以按如下方式使用它：

import { getCurrentInstance } from 'vue';
export default {
setup() {
const app = getCurrentInstance();
const axios = app.appContext.config.globalProperties.$http;

Answer 2

你可以这样称呼它：

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