问题描述
在普通的项目中,每次在组件中调接口时,都需要这样导入
import { rolesList} from '@/api/roles'
如果组件内容过多,看起来就繁杂,下面采用接口统一挂载Vue实例的方法。
步骤
1、编写所需要的接口
import request from '@/utils/request'
//获取权限角色列表
export function rolesList() {
return request({
url: 'roles',
method: 'get'
})
}
2、在api文件夹中新建index.js
将所需的api接口文件导入进来,统一导出。
import * as test from './test'
// 统一导出
export default {
test
}
3、在main.js中引入和挂载
//挂载全局接口
import API from '@/api'
Vue.prototype.$API = API
组件内直接使用
调用的是test文件下的接口,也不必担心项目中出现接口混乱的情况
mounted(){
this.getRolesList()
},
methods:{
async getRolesList(){
const result = await this.$API.test.rolesList()
console.log(result);
}
}
控制台正常输出,组件内也没有进行过引入