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

引言

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

Vue3全局挂载使用Axios学习实战_第1张图片

一、全局挂载

  • 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 = Axios
app.config.globalProperties.$utils = Utils
/* 挂载全局对象 end */
app.use(router).use(store);
app.mount('#app')

二、全局使用

  • vue2中使用this.$http

  • vue3setup中使用getCurrentInstanceAPI获取全局对象:


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

提示: 可以通过打印getCurrentInstance()看到其中有很多全局对象,如:$route$router$store。如果全局使用了ElementUI后,还可以拿到$message$dialog等等。

以上就是Vue3全局挂载使用Axios学习实战的详细内容,更多关于Vue3全局挂载使用Axios的资料请关注脚本之家其它相关文章!

你可能感兴趣的:(Vue3全局挂载使用Axios学习实战)