如何使用composition 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'

在需要它的组件中。

提供/注入

如果出于某种原因，您确实需要从您的 全局提供 Axios app，则另一种方法是使用该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。不要将其用作逃生舱口以在 Composition API 中获得等效的内容。

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

import { getCurrentInstance } from 'vue';

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