【vue】api模块化

前言

前面的文档中，现在已经实现了vuex模块化,router模块化，接下来，将实现api模块化

• vuex模块化
  https://blog.csdn.net/s1441101265/article/details/103548302
• router模块化：https://blog.csdn.net/s1441101265/article/details/108615321

实现过程

• 首先，urls.js

// 公共的
const publices = {
  index: '/index',
  hello: '/hello',
  toLogin: '/toLogin'
}

// 公共的
const user = {
  list: '/list',
  add: '/add',
  edit: '/edit',
  del: '/del'
}

const urls = {
  public: publices,
  user: user
}
export default urls

• 其次，api-user.js

import urls from '../urls'
import { postService } from '../request'

export default {
  /**
   * 删除
   * @param {*} param
   */
  del(param) {
    return postService(urls.public.del, param)
  },
  /**
   * 编辑
   * @param {*} param
   */
  edit(param) {
    return postService(urls.public.edit, param)
  },
  /**
   * 添加
   * @param {*} param
   */
  add(param) {
    return postService(urls.user.add, param)
  },
  /**
   * 列表
   * @param {*} param
   */
  list(param) {
    return postService(urls.user.list, param)
  }
}

• 接着，allapi.js

import publices from './logic/api-public'
export default {
  public: publices
}

• 最后，挂载all.js

import allapi from '../src/api/allapi'
Vue.prototype.$allapi = allapi

• 实践

  this.$allapi.user.list(this.param).then((res) => {
    console.log('res', res)
  })

结尾

有人提到vue-property-decorator，这个后续了解