axios 如何使用组合API调用自定义全局函数|版本3

egdjgwm8  于 2023-01-05  发布在  iOS
关注(0)|答案(2)|浏览(166)

在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>
qyuhtwio

qyuhtwio1#

首先,是不是不可能在需要的组件中简单地导入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;
rfbsl7qr

rfbsl7qr2#

你可以这样称呼它:

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

相关问题