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

2024年4月11日 互联网

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

Vue3 全局Axios

一、全局挂载

  • 在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：
<script>export default {data() {return {list: []}},mounted() {this.getList()},methods: {getList() {this.$http({url: '/api/v1/posts/list'}).then(res=>{let { data } = res.datathis.list = data})},},}
</script>
  • 在vue3的setup中使用getCurrentInstanceAPI获取全局对象：
<template><div class="box"></div>
</template>
<script>import { ref, reactive, getCurrentInstance } from 'vue'export default {setup(props, cxt) {// 方法一 startconst currentInstance = getCurrentInstance()const { $http, $message, $route } = currentInstance.appContext.config.globalPropertiesfunction getList() {$http({url: '/api/v1/posts/list'}).then(res=>{let { data } = res.dataconsole.log(data)})}// 方法一 end// 方法二 startconst { proxy } = getCurrentInstance()function getData() {proxy.$http({url: '/api/v1/posts/list'}).then(res=>{let { data } = res.dataconsole.log(data)})}// 方法二 end}  }
</script>
  1. 方法一：通过getCurrentInstance方法获取当前实例，再根据当前实例找到全局实例对象appContext，进而拿到全局实例的config.globalProperties。
  2. 方法二：通过getCurrentInstance方法获取上下文，这里的proxy就相当于this。

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

《Vue3学习与实战》系列

  • Vue3学习与实战 · 组件通信
  • Vue3学习与实战 · 全局挂载使用Axios（本文）
  • Vue3学习与实战 · 配置使用vue-router路由
  • Vue3学习与实战 · Vuex状态管理
  • vue3 + vite实现异步组件和路由懒加载
  • Vite+Vue3+Vant快速构建项目

欢迎访问：天问博客

最新文章