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 = 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>
  • 在vue3的setup中使用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>
  • 方法一：通过getCurrentInstance方法获取当前实例，再根据当前实例找到全局实例对象appContext，进而拿到全局实例的config.globalProperties。
  • 方法二：通过getCurrentInstance方法获取上下文，这里的proxy就相当于this。

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

以上就是Vue3全局挂载使用Axios学习实战的详细内容，更多关于Vue3全局挂载使用Axios的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue3.0如何在全局挂载对象和方法

    vue3.0如何在全局挂载对象和方法

    目录 如何在全局挂载对象和方法 1.官方的说明 2.更新后的挂载方法 3.在全局使用 4.但是应用中的this对象已经不再是一个Vue对象了 vue3全局挂载和使用 如何在全局挂载对象和方法 1.官方的说明 Vue3.x已经不支持直接Vue.prototype.$http = () => {}这种方式来挂载全局对象,这是由于globalVue不再是构造函数,因此不再支持该构造函数. 2.更新后的挂载方法 这个是官网的说明 所以现在我们的办法就是这样 import { createApp } fr

  • 关于Vue3使用axios的配置教程详解

    目录 一.安装axios 二.配置axios,添加拦截器 三.使用axios发送请求 附:Vue3 中全局引入 axios 总结 axios中文网站:axios-http.com/zh/ 一.安装axios npm install axios --save 二.配置axios,添加拦截器 在src目录下新建一个request文件夹,在里面新建index.ts(或者.js)文件,编辑代码如下: import axios from 'axios' // 创建一个 axios 实例 const ser

  • vue3实战教程之axios的封装和环境变量

    目录 axios 基本使用 配置 封装 请求时添加loading 环境变量 总结 axios axios: ajax i/o system. 一个可以同时在浏览器和node环境进行网络请求的第三方库 功能特点: 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 等等 基本使用 get请求 // 导入的axios是一个实例对象 import axios from 'axios' // a

  • Vue3引入axios封装接口的两种方法实例

    Vue3引入axios封装接口的两种方法实例

    目录 第一种 1.安装 2.新建一个http.js文件 3.使用 第二种 1.安装 2.新建 3.http.js 4.request.js 总结 第一种 1.安装 npm install axios -S 2.新建一个http.js文件 import axios from "axios"; import qs from "qs"; import { Dialog, Toast } from "vant"; // axios.defaults.ba

  • vue全局挂载实现APP全局弹窗的示例代码

    vue全局挂载实现APP全局弹窗的示例代码

    目录 需求背景 需求分析 代码展示 需求背景 app端对接网页端的客服系统,在用户实现网页客户系统发起询问时,app不论在哪个页面都需要弹窗提示 需求分析 这个需求分为两步,一个是负责双向实时通信,一个是全局显示.双向实时通信我们可以利用socket来实现,具体内容不展开(后续看情况再出一篇),本文主要讲全局显示. 代码展示 首先是写个弹窗组件,这里给出个demo.如下 <template> <view class="transferPopup-wrap" style

  • Vue3.0 axios跨域请求代理服务器配置方式

    Vue3.0 axios跨域请求代理服务器配置方式

    目录 axios跨域请求代理服务器配置 axios跨域问题解决 1.在vue.config.js文件中做如下配置 2.request.js(拦截器页面)如下配置 3.具体请求页面如下配置 axios跨域请求代理服务器配置 首先安装axios npm install axios 然后在vue.config.js文件下配置如下代码 (若没有vue.config.js文件可以自己创建这个文件) module.exports = { devServer: { open: true, port: 8001

  • vue3 学习笔记之axios的使用变化总结

    vue3 学习笔记之axios的使用变化总结

    目录 一.axio 得基本使用 二.如何解决跨域问题? 三.封装 四.全局引用 axios 使用 axios 之前,需要先安装好. yarn add axios npm install axios bower install axios <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 上边的四种安装方式,根据你创建的项目,自行选择方式. 一.axio 得基本使用 先创建一个组件,

  • 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' impo

  • Vue3中Vuex状态管理学习实战示例详解

    目录 引言 一.目录结构 二.版本依赖 三.配置Vuex 四.使用Vuex 引言 Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.

  • Vue3组件挂载之创建组件实例详解

    目录 前情提要 mountComponent 创建组件实例 总结 前情提要 上文我们讲解了执行createApp(App).mount('#root')中的mount函数,我们分析了创建虚拟节点的几个方法,以及setRef的执行机制.本文我们继续讲解mountComponent,挂载组件的流程. 本文主要内容 createComponentInstance发生了什么? 如何标准化组件定义的props.emits? 为什么provide提供的值子组件都能访问到? 组件的v-model实现原理.组件

  • Vue3全局组件通信之provide / inject详解

    目录 1.前言 2.provide / inject 3.发起 provide 4.接收 inject 5.响应性数据的传递与接收 6.引用类型的传递与接收 (针对非响应性数据的处理) 7.基本类型的传递与接收 (针对非响应性数据的处理) 1.前言 顾名思义,爷孙组件是比 父子组件通信 要更深层次的引用关系(也有称之为 “隔代组件”): C组件引入到B组件里,B组件引入到A组件里渲染,此时A是C的爷爷级别(可能还有更多层级关系),如果你用 props ,只能一级一级传递下去,那就太繁琐了,因此我

  • Python深度学习实战PyQt5基本控件使用解析

    Python深度学习实战PyQt5基本控件使用解析

    目录 1. PyQt5 控件简介 1.1 什么是控件 1.2 编辑控件的属性 1.3 PyQt5 的控件类型 输入控件: 显示控件: 高级控件: 2. 按钮控件 2.1 按钮控件简介 2.2 按键按钮(QPushButton) 2.3 其它按钮 3. 输入控件 3.1 输入控件简介 3.2 文本输入控件 3.3 调节输入控件 4. Python 应用程序调用图形界面 1. PyQt5 控件简介 1.1 什么是控件 控件也称控件对象,是 Qt用户界面上最基本的组件类型,也是构成用户界面的基本结构.

  • Python深度学习实战PyQt5信号与槽的连接

    Python深度学习实战PyQt5信号与槽的连接

    目录 1. 信号与槽(Signals and slots) 1.1 信号与槽的原理 1.2 信号发送者与槽的接收者 2. QtDesigner 建立信号与槽的连接 2.1 信号与槽的连接:不同的发送者与接收者,槽函数为控件的内置函数 QtDesigner 设置信号/槽的连接的操作步骤如下: 2.2 信号与槽的连接:不同的发送者与接收者,槽函数为自定义函数 QtDesigner 设置信号/槽的连接的操作步骤如下: 2.3 信号与槽的连接:相同的发送者与接收者,槽函数为控件的内置函数 2.4 信号与

  • Python深度学习实战PyQt5布局管理项目示例详解

    Python深度学习实战PyQt5布局管理项目示例详解

    目录 1. 从绝对定位到布局管理 1.1 什么是布局管理 1.2 Qt 中的布局管理方法 2. 水平布局(Horizontal Layout) 3. 垂直布局(Vertical Layout) 4. 栅格布局(Grid Layout) 5. 表格布局(Form Layout) 6. 嵌套布局 7. 容器布局 布局管理就是管理图形窗口中各个部件的位置和排列.图形窗口中的大量部件也需要通过布局管理,对部件进行整理分组.排列定位,才能使界面整齐有序.美观大方. 1. 从绝对定位到布局管理 1.1 什么

  • Python深度学习实战PyQt5菜单和工具栏功能作用

    Python深度学习实战PyQt5菜单和工具栏功能作用

    目录 1. 创建主窗口 1.1 窗口类型 1.2 编辑窗口的属性 1.3 图形界面设计的预览 2. 建立菜单栏 2.1 建立一级菜单 2.2 建立二级菜单 2.3 关联动作 3. 建立工具栏 3.1 添加工具栏 3.2 添加和编辑动作对象 3.3 向工具栏添加动作对象 4. 编写 Python 应用程序调用图形界面 1. 创建主窗口 上文中我们建立的图形界面程序 GUIdemo2.py,通过导入图形界面 uiDemo1.py,已经实现了主窗口的创建. 1.1 窗口类型 进一步地,在 QtDesi

  • Python深度学习实战PyQt5安装与环境配置过程详解

    Python深度学习实战PyQt5安装与环境配置过程详解

    目录 1. PyQt5 图形界面开发工具 1.1 从 CLI 到 GUI 1.2 PyQt5 开发工具 2. 安装 PyQt5 和 QtTools pip 安装 PyQt5 pip 安装 QtTools 3. QtDesigner 和 PyUIC 的环境配置 3.1 在 PyCharm 添加 Create Tools 3.2 添加 QtDesigner 工具 3.3 添加 PyUIC 工具 4. QtDesigner 和 PyUIC 的快速入门 4.1 QtDesigner 的启动和入门 新建一

随机推荐