如何使用组合 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()（不鼓励）

每the Vue documentation，

强烈建议不要在应用程序代码中使用getCurrentInstance。不要将其用作逃生舱口以在 Composition 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')