小程序全局使用api

使用的是 Vue 插件(Plugin)机制,通过 install方法将 API 挂载到 Vue 的原型链或实例上,从而实现全局使用。

具体实现方式如下:

1. 核心机制:Vue Plugin (install)

在 http.api.js中,导出一个默认对象,该对象包含一个 install函数。这是 Vue 官方推荐的标准插件写法。

复制代码
const install = (Vue, vm) => {
    // ...
    vm.$u.api = { 
	postLogin: (params = {}) => vm.$u.post('/admin/login',
			params), //登录接口
		getKeyLogin: (params = {}) => vm.$u.get('/keylogin',
			params), //获取key
}; // 将 API 挂载到 vm.$u.api 上
}
export default { install }
  • Vue: Vue 构造器。
  • vm : 当前 Vue 实例(在 uView UI 框架中,通常指代 this 或全局上下文)。

2. 挂载位置:vm.$u.api

代码中将所有接口方法统一赋值给了 vm.$u.api。 这意味着,只要你能访问到 this.$u,你就可以通过 this.$u.api.xxx() 来调用接口。

复制代码
// 例如在页面中
this.$u.api.getKeyLogin({ uid: this.uid })

3初始化main,js

复制代码
// main.js 示例
import Vue from 'vue'
import uView from "uview-ui";
import httpApi from './common/http.api.js'; // 引入这个文件

Vue.use(uView);
Vue.use(httpApi); // <--- 这里执行了 install 方法,完成了全局挂载

4. 为什么可以直接用 this.$u.api

  • uView UI 框架基础u 是 uView UI 框架挂载在 Vue 原型上的全局对象(`Vue.prototype.u`)。
  • 扩展属性 :http.api.js 并没有创建新的全局变量,而是利用了 uView 已经存在的 $u 对象,在其下面新增了一个 api 属性。
  • 结果 :因为 u 是全局可用的,所以 `u.api` 也是全局可用的。

总结

这是一种典型的 Vue 插件扩展模式

  1. 定义 install 函数。
  2. 在 install 中将功能挂载到 Vue 实例或原型上(这里是挂载到 vm.$u 上)。
  3. 在主入口通过 Vue.use() 注册插件。
  4. 在组件中通过 this.$u.api.方法名() 直接调用。
相关推荐
ooseabiscuit1 天前
Laravel6.x核心优化与特性全解析
android·开发语言·javascript
哆啦A梦15881 天前
20, Springboot3+vue3实现前台轮播图和详情页的设计
javascript·数据库·spring boot·mybatis·vue3
gogoing1 天前
ESLint 配置字段说明
前端·javascript
Lkstar1 天前
面试官让我手写 Promise.all / Promise.race / Promise.allSettled,我直接水灵灵地写出来了
javascript·面试
gogoing1 天前
webpack 的性能优化
前端·javascript
gogoing1 天前
Node.js 模块查找策略(require 完整流程)
javascript·node.js
gogoing1 天前
await fetch() 的两阶段设计
前端·javascript
gogoing1 天前
前端首屏加载优化
前端·javascript
gogoing1 天前
重排与重绘
前端·javascript
徐小夕1 天前
100小时,我做了一款AI CAD建模软件,开源!
前端·vue.js·github