草庐IT

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

城南 2023-09-16 原文

在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函数将data和error变量转换为响应式对象。

除此之外，在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 组件中共享，并且会被所有组件实例继承。因此，你需要确保添加的全局属性和方法不会与组件实例中的属性和方法冲突。

拦截器进阶spanstylecolorVue

有关vue全家桶进阶之路46：Vue3 Axios拦截器和globalProperties全局设置的更多相关文章

  1. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  2. 焕新古文化传承之路，AI为古彝文识别赋能 - 2

    目录1古彝文与古典保护2古文识别的挑战2.1西文与汉文OCR2.2古彝文识别难点3合合信息：古彝文保护新思路3.1图像矫正3.2图像增强3.3语义理解3.4工程技巧4总结1古彝文与古典保护彝文指的是云南、贵州、四川等地的彝族人使用的文字，区别于现代意义上的彝文，古彝文指的是在民间流通使用的原生态彝文，多达87046字。古彝文的起源距今至少数千年，是世界上最古老的文字之一。对古彝文字集研究有助于理解尚未被翻译成汉文、用字尚未规范化的古籍，更深层、透彻地作用于传统文化保护。古彝文字义对照图（网络资料+邵文苑供图）古籍是不可再生的宝贵资源，应当得到妥善保护。中国的古籍在历史上迭经水火兵燹等自然灾害、

  3. vue3.0 + vite2.0+如何兼容低版本浏览器 - 2

    这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一：vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二：安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三：

  4. Vue3的新特性 - 2

    Vue3的新特性包括：CompositionAPI：一种新的API风格，可将有关组件功能的代码逻辑封装在单独的函数中，从而更好地管理和重用代码。Teleport：可以让组件在DOM层次结构中的任何位置渲染。Suspense：一种新的异步渲染模式，可以优化应用程序的性能。更快的渲染速度：Vue3使用了新的虚拟DOM算法，并且对渲染过程进行了优化，因此在渲染大型应用时性能更高。更小的包大小：Vue3的打包大小比Vue2更小，因为它不再需要依赖像vue-template-compiler这样的工具。其他改进：Vue3还具有其他一些改进，例如更好的TypeScript支持、更好的错误提示和更好的调试工

  5. 【思考】聊聊低代码的实践之路 - 2

    文章目录背景一、最初的疑惑二、简单聊聊原理三、组织内实践案例四、实践带来的反思五、最后聊几句问题背景这个概念由来已久，但是在国内兴起，是最近几年；低代码即Low-Code；指提供可视化开发环境，可以用来创建和管理软件应用；简单的说就是可以通过各种组件的拖拽，实现页面的创建，交互流程和逻辑，以及数据层面的管理，更加高效的实现需求；早先在数据公司时；见识过低代码的应用，也参与过部分研发，比如元数据平台，BI分析等；不过，当时还是以数据管理的工具来定义项目，并非是低代码；从「2020年底」开始；实际上，那个时间节点，低代码平台的应用已经形成趋势了；现在的公司，将低代码平台的使用规划到业务体系中；后来

  6. 「前端代码简洁之路」后台系统之详情页设计 - 2

    一、乱花迷人眼我就是被迷的那双眼。有时候需求来了，用熟悉的套路进行开发，确实很节省时间也能保证功能的稳定，但是这些开发的惯性无形中阻碍了我对技术的探索。我一直想改造详情页，解放重复功能开发的劳动力，但是详情页一眼望都是内容平铺，好像并没有什么可做的代码设计。后来我拨开繁花，发现详情页的组件化不必想的过于复杂，后台系统风格统一即可。因为大部分的详情页面是内容的展示，偶尔会出现少量的操作功能。将风格统一的部分进行组件化处理，操作功能使用回调函数放回当前页面，避免组件里做过多的业务逻辑。看，这不就成了。项目基于React框架开发的，所以代码写法是JSX语法，组件开发使用的hooks函数式组件，UI框

  7. 大家沉迷短视频无法自拔？Python爬虫进阶，带你玩转短视频 - 2

    大家好，我是辣条。现在短视频可谓是一骑绝尘，吃饭的时候、休息的时候、躺在床上都在刷短视频，今天给大家带来python爬虫进阶：美拍视频地址加密解析。短视频js逆向解析抓取目标工具使用重点学习内容项目思路解析抓取目标目标网址：美拍视频工具使用开发环境：win10、python3.7开发工具：pycharm、Chrome工具包：requests、xpath、base64重点学习内容爬虫采集数据的解析过程js代码调试技巧js逆向解析代码Python代码的转换项目思路解析进入到网站的首页挑选你感兴趣的分类根据首页地址获取到进入详情页面的超链接的跳转地址找到对应加密的视频播放地址数据这个数据是静态的网页

  8. ruby - 在带有 RVM : 的 OS X 上安装 Ruby 1.9.3 时出现 "No available formula for gcc46" - 2

    我安装了Homebrew，我正在尝试安装RVM:rvminstall1.9.3-head我得到这个错误:Installingrequiredpackages:gcc46Errorrunning'requirements_osx_brew_libs_installgcc46',pleaseread/Users/mike/.rvm/log/1384918134_ruby-1.9.3-head/package_install_gcc46.logRequirementsinstallationfailedwithstatus:1brewdoctor说我准备好了。在日志中我看到:Error:Do

  9. ruby - 如何在 Rails 3.0.3 中设置邮件拦截器？ - 2

    我正在使用rails3.0.3、ruby1.9.2-p180、邮件(2.2.13)。我正在尝试设置邮件拦截器，但出现以下错误/home/abhimanyu/Aptana_Studio_3_Workspace/delivery_health_dashboard_03/config/initializers/mailer_config.rb:16:in`':uninitializedconstantDevelopmentMailInterceptor(NameError)我该如何解决？我使用的代码如下所示:config/initializer/mailer_config.rbActionM

  10. javascript - Angular 5 提供基于环境的http拦截器 - 2

    我的angular-cli(v1.5.1，angularv5)应用程序中有以下两个环境:开发产品Dev使用模拟数据，我提供了一个http拦截器。Pro使用实时休息api。我如何在dev上提供http拦截器，而不是在pro上？我已经尝试了以下方法，但它不起作用:{provide:HTTP_INTERCEPTORS,useFactory:()=>{if(environment.useMockBackend===true){returnMockHttpInterceptor;}returnfalse;},multi:true} 最佳答案

随机推荐