使用的是 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 插件扩展模式:
- 定义 install 函数。
- 在 install 中将功能挂载到 Vue 实例或原型上(这里是挂载到
vm.$u上)。 - 在主入口通过
Vue.use()注册插件。 - 在组件中通过
this.$u.api.方法名()直接调用。