在vue2
中会习惯性的把axios
挂载到全局,以方便在各个组件或页面中使用this.$http
请求接口。但是在vue3
中取消了Vue.prototype
,在全局挂载方法和属性时,需要使用官方提供的globalProperties
API。
一、全局挂载
- 在
vue2
项目中,入口文件main.js
配置Vue.prototype
挂载全局方法对象:
1 | // vue 2.x |
- 在
vue3
项目中,入口文件main.js
配置globalProperties
挂载全局方法对象:
1 | // vue 3.x |
二、全局使用
- 在
vue2
中使用this.$http
:
1 | // vue 2.x |
- 在
vue3
的setup
中使用getCurrentInstance
API获取全局对象:
1 | // vue 3.x |
- 方法一:通过
getCurrentInstance
方法获取当前实例,再根据当前实例找到全局实例对象appContext
,进而拿到全局实例的config.globalProperties
。 - 方法二:通过
getCurrentInstance
方法获取上下文,这里的proxy
就相当于this
。
提示: 可以通过打印getCurrentInstance()
看到其中有很多全局对象,如:$route
、$router
、$store
。如果全局使用了ElementUI
后,还可以拿到$message
、$dialog
等等。
《Vue3学习与实战》系列
- Vue3学习与实战 · 组件通信
- Vue3学习与实战 · 全局挂载使用Axios(本文)
- Vue3学习与实战 · 配置使用vue-router路由
- Vue3学习与实战 · Vuex状态管理
- vue3 + vite实现异步组件和路由懒加载
- Vite+Vue3+Vant快速构建项目
欢迎访问:天问博客
本文作者: Tiven
发布时间: 2021-11-24
最后更新: 2023-03-02
本文标题: Vue3学习与实战 · 全局挂载使用Axios
本文链接: https://www.tiven.cn/p/7f7ba3b2/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2021-11-24
最后更新: 2023-03-02
本文标题: Vue3学习与实战 · 全局挂载使用Axios
本文链接: https://www.tiven.cn/p/7f7ba3b2/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!