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

最新推荐文章于 2024-06-25 17:15:15 发布
最新推荐文章于 2024-06-25 17:15:15 发布
阅读量1.4k 收藏
点赞数
分类专栏： 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项目api全局封装
l2345432l的博客
01-26 2481
目录结构 config.js文件配置 // 线上环境默认的配置 const defaultConfig = { apiHost: '地址', staticHost: '' } // 测试环境 const previewConfig = { apiHost: '地址', staticHost: '' } // 本地环境配置 const localConfig = { apiHost: '地址', staticHost: '' } let hostConfig = defaul.
VUE 3——4：组件内部的组合式 API
dangfulin的博客
04-16 2934
复用与组合对工程化的大项目更有意义，因此我们提前介绍了如何创建 Vue 3 项目，简单创建并使用了一些 SFC，接下来就来介绍如何实现 SPC 的复用与组合。
vue统一引入api文件全部函数
最新发布
derdu的博客
06-25 236
在main.js中引入全部api接口使用时不用再引入。
【前端VUE基础（六）】组件发请求的几种方式
shanglin1122的博客
07-19 1705
所以可以通过 this.$store.dispatch 来调用 Vuex 中的 actions，而不需要使用 mapActions 辅助函数将 actions 映射为组件的方法。这样可以减少代码的复杂度，使代码更加简洁。属性的对象作为参数，其中。时，需要传递一个包含。
vue3 配置自动导入API和组件
好川的博客
09-25 6208
不用 import 引入， 打包时会默认加上
Vue实例属性
JustinNeil的博客
08-25 379
Vue实例属性vm.$datavm.$propsvm.$elvm.$optionsvm.$parentvm.$rootvm.$childrenvm.$slotsvm.$scopedSlotsvm.$refsvm.$isServervm.$attrsvm.$listeners vm.$data 类型：Object 详细：Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。...
vue中Axios的封装与API接口的管理详解
10-18
这样，在Vue组件中调用API就变得非常简单： ```javascript import { getUserInfo, login } from '@/api/api.js'; this.$store.dispatch('getUserInfo').then(response => { // 处理获取用户信息的逻辑 }); login...
Vue3+Typescript日历组件
07-29
在Vue3中，我们可以使用第三方库如`date-fns`或`moment.js`来处理日期，同时可能需要引入农历转换库，如`chinese-calendar`。 2. **显示星座**：根据阳历日期，确定对应的星座区间，这需要星座的起止日期数据。 3. *...
vue2.0中文离线API
09-19
Vue 2.0 中文离线API提供了开发者在无网络环境下查阅Vue.js 2.0 API的便利，对于学习和工作中遇到的问题能够快速查证。 Vue的核心特性包括： 1. 双向数据绑定：Vue采用MVVM模式，通过`v-model`指令实现视图和模型...
vue.js文件，在前端项目中引入vue框架
05-08
6. **生命周期和指令**: Vue组件有多种生命周期钩子函数，如`created`、`mounted`、`updated`等，可以在特定阶段执行操作。Vue还提供了一些内置指令，如`v-if`、`v-for`、`v-bind`等，用于简化DOM操作。 7. **插件...
vue请求数据的三种方式
10-15
- **安装**：使用 `cnpm install vue-resource --save` 命令安装，这样可以在 package.json 文件中记录依赖，以便在生产环境中使用。 - **引入**：在 `main.js` 文件中，引入并注册 vue-resource：`import Vue...
vue怎么把api 挂载到全局_Vue全局API简析
weixin_33632413的博客
01-14 499
Vue定义了一些API，然后把它放在Vue对象上方便在Vue项目中全局使用Vue.extendVue.extend的参数为一个组件的options，然后返回一个构造函数用于生成新组件。options有哪些属性呢，想象一下平时我们写的Vue组件，主要有template、data、methods还有生命周期函数等等。demo的话可以查看Vue文档，以下是粘贴的源码。function initExten...
vue封装请求与使用
0.0 的博客
08-26 467
正常的请求 axios .get("/api/article/allArticle") .then(res => { console.log(res) }) .catch(err => { console.log(err); }); 封装后使用的请求，需引入api文件() this.$api //名字为在api中定义的名字，括号内为所需要传的参数 .allArticle()
Vue Router的API参考
任性的wo的博客
06-11 1101
<router-link> <router-link>组件支持用户在具有路由功能的应用中(点击)导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的CSS类名。 <router-link>比起写死的 <a href="....
尚品汇vue项目出现this.$API.spu is not a function报错
qq_45624425的博客
02-16 611
做删除模块时，突然找不到getSPuList获取的数据，发现方法并没执行，前几分钟刚测试还能执行，百思不得其解，检查传参，接口都没有问题，最后突然发现.getSPuList方法被误删了，但是我真的没有去删过它。总发生一些离谱的bug。做删除模块时，突然找不到getSPuList获取的数据，发现方法并没执行，
vue怎么引入全局方法（前端小白必看！）
weixin_44490057的博客
11-21 4910
mixin是什么？怎么用？前端新手上车
博客摘录「 vue中调接口的方式：this.$api、直接调用、axios」2023年11月14日
啊谋的博客
11-22 248
getImportantRiskList
vue设置全局访问接口API地址
scarlett1017的博客
09-25 3362
1. 设置全局访问接口API地址的好处 在前后端分离的项目里，与后端交互过程中，需要通过接口来访问后端中的数据。一般的接口前部分的ip地址都是一致的，如果没有进行url的全局设置，那么当后端的接口地址改变或者是部署之后的网络地址改变，那么就需要一个一个接口去修改，所以最好是进行设置全局访问接口的API地址。 2.如何设置全局访问接口API地址 1）在src目录下建立一个新文件夹，在这个文件夹里面在新建 index,js 2）在index.js中进行一下的代码 3）在main.js中进行以下的.
Vue组件生命周期深度解析：钩子函数与应用场景
9. **activated** 和 **deactivated** (Vue 2): 这两个钩子仅在使用 `keep-alive` 包裹的组件中触发，分别表示组件被缓存激活和失活时。它们可以用来做缓存组件的状态保存和恢复。 10. **errorCaptured** (Vue 2/3)...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值