Vue3全局挂载使用Axios学习实战 Vue3全局挂载使用Axios学习实战

引言
一、全局挂载
二、全局使用

引言在vue2中会习惯性的把axios挂载到全局，以方便在各个组件或页面中使用this.$http请求接口。但是在vue3中取消了Vue.prototype，在全局挂载方法和属性时，需要使用官方提供的globalPropertiesAPI。

文章图片

一、全局挂载

在vue2项目中，入口文件main.js配置Vue.prototype挂载全局方法对象：

import Vue from 'vue'import router from '@/router'import store from '@vuex'import Axios from 'axios'import Utils from '@/tool/utils'import App from './App.vue'// .../* 挂载全局对象 start */Vue.prototype.$http = Axios; Vue.prototype.$utils = Utils; /* 挂载全局对象 end */new Vue({router,store,render: h => h(App)}).$mount('#app')

在vue3项目中，入口文件main.js配置globalProperties挂载全局方法对象：

import { createApp } from 'vue'import router from './router'import store from './store'import Axios from 'axios'import Utils from '@/tool/utils'import App from './App.vue'// ...const app = createApp(App)/* 挂载全局对象 start */app.config.globalProperties.$http = Axiosapp.config.globalProperties.$utils = Utils/* 挂载全局对象 end */app.use(router).use(store); app.mount('#app')

二、全局使用

在vue2中使用this.$http：

在vue3的setup中使用getCurrentInstanceAPI获取全局对象：

方法一：通过getCurrentInstance方法获取当前实例，再根据当前实例找到全局实例对象appContext，进而拿到全局实例的config.globalProperties。
方法二：通过getCurrentInstance方法获取上下文，这里的proxy就相当于this。

提示：可以通过打印getCurrentInstance()看到其中有很多全局对象，如：$route、$router、$store。如果全局使用了ElementUI后，还可以拿到$message、$dialog等等。
【Vue3全局挂载使用Axios学习实战】以上就是Vue3全局挂载使用Axios学习实战的详细内容，更多关于Vue3全局挂载使用Axios的资料请关注脚本之家其它相关文章！