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

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


欢迎访问:天问博客

Vue3学习与实战 · 全局挂载使用Axios的更多相关文章

  1. Android JNI学习(二)——实战JNI之“hello world”

    本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...

  2. 【vue3】封装自定义全局插件

    [vue3]封装自定义全局插件 原vue2方法 main.js import Vue from 'vue' import App from './App.vue' import router from ...

  3. NGUI 学习笔记实战之二——商城数据绑定(Ndata)

    上次笔记实现了游戏商城的UI界面,没有实现动态数据绑定,所以是远远不够的.今天采用NData来做一个商城. 如果你之前没看过,可以参考上一篇博客   NGUI 学习笔记实战——制作商城UI界面  ht ...

  4. 深度学习入门实战(二)-用TensorFlow训练线性回归

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者 :董超 上一篇文章我们介绍了 MxNet 的安装,但 MxNet 有个缺点,那就是文档不太全,用起来可能 ...

  5. Spring的学习与实战(续)

    @ 目录 背景 JavaMailSender Spring集成邮件发送功能 1. 添加maven依赖 2. 添加Spring邮件配置 3. 创建邮件管理Bean并注入Spring应用上下文 4. 修改 ...

  6. Mybatis-Plus 实战完整学习笔记(四)------全局参数配置

    一.全局配置设置 (1)全局配置Id自动生成 <!--定义mybatisplus全局配置--> <bean id="globalConfig" class=&qu ...

  7. NGUI 学习笔记实战——制作商城UI界面

    http://www.cnblogs.com/chongxin/p/3876575.html Unity3D的uGUI听说最近4.6即将推出,但是目前NGUI等UI插件大行其道并且已经非常成熟,所以我 ...

  8. vue学习之ajax 简单快速使用axios

    vue2.x 推荐使用axios 1.首先使用安装 npm install axios -S 2.在哪用在哪引入 import axios from 'axios' 或则在main.js 中引入 在申 ...

  9. 深度学习入门实战(一):像Prisma一样算法生成梵高风格画像

    本文由云+社区发表 作者:董超 导语:现在人工智能是个大热点,而人工智能离不开机器学习,机器学习中深度学习又是比较热门的方向,本系列文章就从实战出发,介绍下如何使用MXnet进行深度学习~ 既然是实战 ...

  10. 大数据技术之_08_Hive学习_05_Hive实战之谷粒影音(ETL+TopN)+常见错误及解决方案

    第10章 Hive实战之谷粒影音10.1 需求描述10.2 项目10.2.1 数据结构10.2.2 ETL原始数据10.3 准备工作10.3.1 创建表10.3.2 导入ETL后的数据到原始表10.3 ...

随机推荐

  1. @Transactional 事务管理

    全面分析 Spring 的编程式事务管理及声明式事务管理 事务传播行为 所谓事务的传播行为是指,如果在开始当前事务之前,一个事务上下文已经存在,此时有若干选项可以指定一个事务性方法的执行行为.在Tra ...

  2. Web项目,F12调试的说明

    sessionstorage,localstorage和cookie之间的区别 区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sess ...

  3. 定时备份mysql

    @echo offset filename=%date:~0,4%%date:~5,2%%date:~8,2%%time:~0,2%%time:~3,2%%time:~6,2%mysqldump -- ...

  4. (八)ASP.NET自定义用户控件(1)

    http://blog.csdn.net/laodao1/article/details/5897366 ASP.NET自定义控件组件开发 第一章:从一个简单的控件谈起 起始开发ASP.NET自定义控 ...

  5. oracle SQL Develop导出数据库中的表格数据到excel

    首先打开oracle数据库 1.查询数据库, SELECT * FROM pub_attribute WHERE ELEMENT_CODE='bb382e10d7ce437b8a8c980ba20ac ...

  6. android查看真机中的数据库

    0.在有网的前提下1.安装 Android Studio,Lantern,Chrome浏览器2.在在githab上搜索stetho,打开第一个facebook/stetho3.在Gradle Scri ...

  7. scanf返回值问题

    在家养病,闲着没事看C primer plus,看到书中对于scanf输入的判断,常用如下方法: 此时它将返回1视为我输入成功,如果不为1则视为输入失败.那到底scanf的返回值具体指的是什么呢? 例 ...

  8. Python02(Linux命令)

    Trainning-day01回顾 1.who :查看登录到系统的用户信息 2.pwd :查看当前所在路径 3.ls :查看当前目录的内容 ls -l ls -a ls -la / ls -l -a ...

  9. LVS(一):基本概念和三种模式

    网站架构中,负载均衡技术是实现网站架构伸缩性的主要手段之一.所谓"伸缩性",是指可以不断向集群中添加新的服务器来提升性能.缓解不断增加的并发用户访问压力. 负载均衡有好几种方式:h ...

  10. RAID的详细配置

    一.RAID 1.RAID机制通过使用多硬盘并行工作的方式来提高硬盘的IO性能 2.RAID分为多种,称之为RAID level,RAID共有7级:RAID0~RAID6 3.常用的RAID级别有:R ...