首页 > 其他分享 >vue全家桶进阶之路46:Vue3 Axios拦截器和globalProperties全局设置

vue全家桶进阶之路46:Vue3 Axios拦截器和globalProperties全局设置

时间:2023-04-20 20:23:20浏览次数:34  
标签:Axios 进阶 vue app Vue js 拦截器 globalProperties 全局

在Vue.js 3中,使用Axios与Vue.js 2.x中类似,但是需要进行一些修改和更新,下面是Vue.js 3中Axios的定义和使用方式:

首先,你需要安装Axios和Vue.js 3.x,可以使用npm或yarn等包管理工具安装:

npm install axios vue@next

然后,在你的Vue.js 3应用程序中,你可以使用以下代码来导入和使用Axios:

import { ref } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const data = ref(null)
    const error = ref(null)

    axios.get('/api/data')
      .then(response => {
        data.value = response.data
      })
      .catch(error => {
        error.value = error
      })

    return { data, error }
  }
}

上面的代码使用Axios发出一个GET请求,从API端点/api/data获取数据,并将响应数据赋值给Vue组件的data变量中,如果请求出错,则将错误信息赋值给error变量。

注意,在Vue.js 3中,使用Axios时,需要将其包装在Vue 3的Reactivity API中,例如,上面的代码中,使用了Vue 3的ref函数将dataerror变量转换为响应式对象。

除此之外,在Vue.js 3中,你可以将Axios作为插件使用,并在Vue实例中进行全局配置。下面是一个示例:

import { createApp } from 'vue'
import axios from 'axios'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$axios = axios
// 在这里添加更多的全局配置

app.mount('#app')

上面的代码将Axios作为Vue的插件,并将其添加到Vue实例的全局属性$axios中,以便在应用程序的任何组件中使用。

总之,Vue.js 3中的Axios使用与Vue.js 2.x基本相同,但需要使用Vue 3的Reactivity API将数据转换为响应式对象。此外,你可以将Axios作为Vue的插件使用,并在Vue实例中进行全局配置。

globalProperties 

globalProperties 是 Vue 3 中的一个全局配置对象,它允许你在应用程序的任何地方添加自定义的全局属性和方法。

在 Vue.js 3 中,你可以使用 app.config.globalProperties 对象添加全局属性和方法,这样在 Vue 实例中就可以直接访问它们,而不需要在每个组件中都进行导入。

例如,你可以通过以下方式在 globalProperties 中添加一个全局属性 $myGlobalData

const app = createApp(App)

app.config.globalProperties.$myGlobalData = { name: 'John', age: 30 }

app.mount('#app')

这样,在 Vue 组件中就可以通过 $myGlobalData 访问这个全局属性:

export default {
  setup() {
    const data = ref($myGlobalData)
    return { data }
  }
}

同样,你也可以在 globalProperties 中添加全局方法:

const app = createApp(App)

app.config.globalProperties.$myGlobalMethod = function() {
  console.log('This is a global method!')
}

app.mount('#app')

然后,在 Vue 组件中就可以通过 $myGlobalMethod() 调用这个全局方法:

export default {
  setup() {
    $myGlobalMethod() // 输出:This is a global method!
  }
}

需要注意的是,globalProperties 中添加的全局属性和方法会在所有 Vue 组件中共享,并且会被所有组件实例继承。因此,你需要确保添加的全局属性和方法不会与组件实例中的属性和方法冲突。

标签:Axios,进阶,vue,app,Vue,js,拦截器,globalProperties,全局
From: https://www.cnblogs.com/beichengshiqiao/p/17338180.html

相关文章

  • Vue3 日历组件的实现
    Vue3日历组件的实现以下是一个基于Vue3实现的简单日历组件的代码示例。这个日历组件包含了前一个月、当前月、下一个月的日期,并且可以支持选择日期、切换月份等功能。<template><divclass="calendar"><divclass="header"><buttonclass="prev"@click="pre......
  • Day 26 26.1 JS进阶之JS对象
    JS进阶之JS对象【一】、字符串对象字符串创建(两种方式)变量=“字符串”字串对象名称=newString(字符串)varstr1="helloworld";//推荐varstr1=newString("helloword");//字符串对象的操作varstr="hello";//这就是字符串对象console.log(str);//......
  • Vue3 watch 监听对象数组中对象的特定属性
    Vue3watch监听对象数组中对象的特定属性在Vue3中,可以使用watch函数来监听对象数组中对象的特定属性。可以通过在回调函数中遍历数组来检查对象的特定属性是否发生变化,并在变化发生时执行相应的操作。一、监听对象的特定属性例如,假设有一个名为items的对象数组,其中每个......
  • 《算法竞赛进阶指南》 第五章 237. 程序自动分析
    地址https://www.acwing.com/problem/content/239/在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足。考虑一个约束满足问题的简化版本:假设x1,x2,x3,…代表程序中出现的变量,给定n个形如xi=xj或xi≠xj的变量相等/不等的约束条件,请判定是否可以分......
  • CentOS7 云服务器搭建及部署SpringBoot+vue项目
    CentOS7云服务器搭建及部署SpringBoot+vue项目1)云服务器配置以及环境搭建1.1JDK安装卸载现有环境(有则卸载)使用rpm命令查询相关java套件rpm-qa|grepjava如果存在,通过命令删除对应版本的JDKrpm-e--nodepsjava-1.8.0-openjdk-1.8.0.322.b06-1.el7_9.x86_64rpm-e......
  • Module not found: Error: Can't resolve 'axios' in 'D:\BaiduSyncdisk\vue-cli-pr
    Modulenotfound:Error:Can'tresolve'axios'in'D:\BaiduSyncdisk\vue-cli-project\dc_vue3\src\utils'  因:没有安装axios插件在运行项目的地方npminstall--saveaxios解决办法 npminstall--saveaxios......
  • Vue独立组件开发: prop event slot
    本文是介绍独立组件开发的系列文章的第一篇。Vuejs无疑是当下最火热的前端框架,而它最精髓的,正是它的组件与组件化。写一个Vue项目,就是在写一个个的组件,掌握了Vue组件的各种开发模式与技巧,再复杂的业务场景也可轻松拿捏。组件的分类Vue组件分成三类:页面组件由 vue-router 产......
  • Vue 独立组件开发:不一样的组件通信方式
    本文是介绍独立组件开发的系列文章的第二篇。组件的通信组件一般来说有以下几种关系:父子关系隔代关系兄弟关系组件间经常会通信,Vue内置的通信手段一般有两种:ref:给元素或组件注册引用信息;$parent / $children:访问父/子实例。这两种方式都是直接得到组件的实例,然后直接调用组件......
  • Vue3+TS+Node打造个人博客(后端架构)
    在使用Express搭建后端服务时,主要关注的几个点是:路由中间件和控制器SQL处理响应返回体数据结构错误码Web安全环境变量/配置路由和控制器路由基本上是按模块或功能去划分的。首先是按模块去划分一级路由,各个模块的子功能相当于是用二级路由处理。简单举个例子,/article......
  • vue全家桶进阶之路43:Vue3 Element Plus el-form表单组件
    在ElementPlus中,el-form是一个表单组件,用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法,使表单验证更加容易。使用el-form组件,您可以将表单控件组织在一起,并对表单进行验证,以确保提交的数据符合预期的格式和要求。该组件具有以下特性:支持内置......