Vue中api内请求函数的快捷全局引入 组件内使用

最新推荐文章于 2023-02-10 10:16:33 发布
最新推荐文章于 2023-02-10 10:16:33 发布
阅读量1.3k 收藏
点赞数
分类专栏： VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65262198/article/details/124077995
版权

在开发项目中，我们将向后台请求数据的函数写在api文件下。我们可以通过vuex中发送请求获取到数据保存到仓库中，也可以直接在组件中引入使用。

但是请求函数过多的情况下。组件内使用引入也会变得复杂 代码显得太冗余。下列方法把api的接口函数注册在Vue的原型链中。

其原理和$bus全局事件总线一样 入口文件处理好只需要引入一次

组件中使用代码如下  ：

this.$API.xxx (xxx位api中暴露请求函数名)

编程界的冠希
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue中使用防抖函数组件操作
10-15
主要介绍了在vue中使用防抖函数组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中api使用
donghuzi1
02-27 920
npm i element-ui -S npm install --save axios vue-axios //引入vue-axios 并在main.js中引入 ```js import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(ElementUI); Vue
vue怎么把api 挂载到全局_Vue全局API简析
weixin_33632413的博客
01-14 485
Vue定义了一些API，然后把它放在Vue对象上方便在Vue项目中全局使用Vue.extendVue.extend的参数为一个组件的options，然后返回一个构造函数用于生成新组件。options有哪些属性呢，想象一下平时我们写的Vue组件，主要有template、data、methods还有生命周期函数等等。demo的话可以查看Vue文档，以下是粘贴的源码。function initExten...
vue项目中 全局数据的使用
m-dididid的博客
11-29 2042
用vue写项目一般都会用到组件，而组件一般是独立的，组件自身需要的数据都写在组件自身内部，而当我们需要组件之间共享数据时，就需要全局数据了。 首先，建立一个js文件globalData.js 将需要共享的数据写在这个js文件中并 export const mapdata=[] const provinceName='' const t='' const tt='' ...
Vue根据接口返回路径，异步动态拼接路径引入组件（配置化）
m0_50395119的博客
05-22 1196
created() { this.$options.components[this.componentName] = (resolve) => require([`@/views/undwrt/components/${this.componentName}.vue`], resolve) }, render: function(createElement) { return createElement(this.componentName) }
vue以API的方式加载组件
weixin_41897680的博客
11-29 943
前言 大部分组件的使用，基本都是通过import方式导入，这也是最常用的。但是有些时候也需要通过API方法的形式调用。比较常见的比如element ui 的Message 消息提示。这里主要介绍3.x版本的写法，2.x版本可以看我的另一篇文章，简单写了个例子以及自己的理解。 Vue.extend、message消息提示 API方式加载组件 参考文章： vue 3.0 封装一个message提示组件 极简系列—vue3.x消息组件message 全局API与vue2.x变化 变更前 变更后 V
vue 父组件中调用子组件函数的方法
10-16
主要介绍了vue 父组件中调用子组件函数的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Vue中的异步组件函数实现代码
10-18
主要介绍了Vue中的异步组件函数实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
在vue项目中 实现定义全局变量 全局函数操作
01-18
设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。 全局变量模块文件： ...
VUE项目后端api请求封装V2.0
m0_57945629的博客
05-17 986
一、安装axios和config npm install axios --Save npm install config --Save 二、封装config文件 在src目录下创建config文件夹，config内创建index.js文件 //网络请求地址 例如: http://wwww.baidu.com 本地开发时，可直接填写后端测试接口地址(需要设置浏览器允许跨域请求，或后端设置Cross-origin允许跨域)。 //本地开发时，也可使用默认空字符串，但需要在 vue.confi
vue怎么把api 挂载到全局_vue全局API和使用方法
weixin_39608116的博客
01-17 491
Vue.use(plugins) 注册一个插件例子：import Vue from 'vue'import Router from 'vue-router'// 不要忘了调用此方法Vue.use(VueRouter)Vue.directive()创建或者获取自定义指令// 注册(指令函数)Vue.directive('my-directive', {bind: function () {},ins...
Vue Vue.component（）注册API的使用（Register the use of the API）
qq_53986004的博客
10-12 431
vue.component注册组件的使用
【vue+若依】封装接口全局使用
qq_40282446的博客
02-10 311
比如每个页面上都要使用省市区等接口 可以直接全局挂载
vue动态加载组件(请求后端获取需要加载的组件文件名)
qq_39135880的博客
09-25 1714
怎么总是给我这个只学了一个月vue的人提些奇怪的要求? 要求:前端页面跳转时，通过路由地址区别，请求后端不同接口，后端接口返回相应组件的vue文件地址，前端根据这个(些)地址加载对应组件到前端 主要用到的就是component中的is来实现 上代码: <template> <div> <component :is="apps" :data="data" @componentResult="componentResult" /> </div> </
钢桁架结构振动特性渐变分析工具
最新发布
05-20
钢桁架结构振动特性渐变分析工具
数据库实战-收集一些常见的 MySQL 死锁案例.zip
05-20
数据库实战-收集一些常见的 MySQL 死锁案例.zip 数据库实战-收集一些常见的 MySQL 死锁案例.zip 在工作过程中偶尔会遇到死锁问题，虽然这种问题遇到的概率不大，但每次遇到的时候要想彻底弄懂其原理并找到解决方案却并不容易。这个项目收集了一些常见的 MySQL 死锁案例，大多数案例都来源于网络，并对其进行分类汇总，试图通过死锁日志分析出每种死锁的原因，还原出死锁现场。 实际上，我们在定位死锁问题时，不仅应该对死锁日志进行分析，还应该结合具体的业务代码，或者根据 binlog，理出每个事务执行的 SQL 语句。
Android的移动应用与php服务器交互实例源码.rar
05-20
Android的移动应用与php服务器交互实例源码.rar
【滤波跟踪】基于matlab平方根容积卡尔曼滤波机器人手臂运动跟踪【含Matlab源码 4540期】.mp4
05-20
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
计算BMI等一些关于热量和蛋白质摄入的小工具.zip
05-20
蛋白质是生物体中普遍存在的一类重要生物大分子，由天然氨基酸通过肽键连接而成。它具有复杂的分子结构和特定的生物功能，是表达生物遗传性状的一类主要物质。 蛋白质的结构可分为四级：一级结构是组成蛋白质多肽链的线性氨基酸序列；二级结构是依靠不同氨基酸之间的C=O和N-H基团间的氢键形成的稳定结构，主要为α螺旋和β折叠；三级结构是通过多个二级结构元素在三维空间的排列所形成的一个蛋白质分子的三维结构；四级结构用于描述由不同多肽链（亚基）间相互作用形成具有功能的蛋白质复合物分子。 蛋白质在生物体内具有多种功能，包括提供能量、维持电解质平衡、信息交流、构成人的身体以及免疫等。例如，蛋白质分解可以为人体提供能量，每克蛋白质能产生4千卡的热能；血液里的蛋白质能帮助维持体内的酸碱平衡和血液的渗透压；蛋白质是组成人体器官组织的重要物质，可以修复受损的器官功能，以及维持细胞的生长和更新；蛋白质也是构成多种生理活性的物质，如免疫球蛋白，具有维持机体正常免疫功能的作用。 蛋白质的合成是指生物按照从脱氧核糖核酸（DNA）转录得到的信使核糖核酸（mRNA）上的遗传信息合成蛋白质的过程。这个过程包括氨基酸的活化、多肽链合成的起始、肽链的延长、肽链的终止和释放以及蛋白质合成后的加工修饰等步骤。 蛋白质降解是指食物中的蛋白质经过蛋白质降解酶的作用降解为多肽和氨基酸然后被人体吸收的过程。这个过程在细胞的生理活动中发挥着极其重要的作用，例如将蛋白质降解后成为小分子的氨基酸，并被循环利用；处理错误折叠的蛋白质以及多余组分，使之降解，以防机体产生错误应答。 总的来说，蛋白质是生物体内不可或缺的一类重要物质，对于维持生物体的正常生理功能具有至关重要的作用。
vue3组合式api中使用axios
08-29
在Vue3的组合式API中使用axios，可以按照以下步骤进行： 1. 首先，安装axios依赖。你可以使用npm或者yarn来进行安装，例如：`npm install axios`。 2. 在你需要使用axios的组件中，引入axios模块。你可以使用`import axios from 'axios'`。 3. 在组件中，创建一个异步函数用来发送axios请求。你可以使用`async/await`或者`Promise`来处理异步操作。例如： ```javascript async function fetchData() { try { const response = await axios.get('http://example.com/api/data'); const data = response.data; // 处理获取到的数据 } catch (error) { // 处理错误情况 } } ``` 4. 调用这个异步函数，可以在组件的生命周期钩子函数或者其他方法中调用。例如，在created钩子函数中调用： ```javascript export default { created() { fetchData(); } } ``` 或者在某个事件触发时调用： ```html <button @click="fetchData">获取数据</button> ``` ```javascript export default { methods: { async fetchData() { try { const response = await axios.get('http://example.com/api/data'); const data = response.data; // 处理获取到的数据 } catch (error) { // 处理错误情况 } } } } ``` 通过以上步骤，你就可以在Vue3的组合式API中使用axios来发送异步请求了。引用<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue3中全局配置 axios 的两种方式](https://blog.csdn.net/weixin_56650035/article/details/125610295)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值