【Vue - axios】将项目中的所有接口都挂载到Vue实例上，免去在组件内导入接口

问题描述

在普通的项目中，每次在组件中调接口时，都需要这样导入

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);
      }
    }

控制台正常输出，组件内也没有进行过引入