VueCli3构建TS项目的方法步骤

}
return requestType === 'post' ? qs.stringify(params) : params
}

/**
* 请求接口的地址处理
* @param urlData 请求接口
* @param type 请求路径
* @example url(cmdName.login)
*/
export function url (urlData: string, type: any = process.env.VUE_APP_API_PATH) {
// @example https://example.com + agsgw/api/ + auth.agent.login
return process.env.VUE_APP_API_URL + type + urlData
}

/**
* params 参数的处理
* @param opsIdParams 是否传递opsId
* @param otherParams 是否传有其它参数
*/
function dealParams (opsIdParams: boolean, otherParams: boolean | object): object {
let obj: any = {}
// opsIdParams 默认传opsId
if (opsIdParams) {
obj.opsId = getCookie('token') || ''
}
// otherParams其他默认参数, 如sn
if (otherParams === true) {
// obj.sn = getCookie('switchSn') || ''
} else {
// 其他object
if (isPlainObject(otherParams)) {
obj = {...obj, ...otherParams}
}
}
return obj
}

接口名称单独作为一个文件

/**
 * 后台接口名称
 */
const cmdName = {
 login: 'auth.agent.login'
}
export default cmdName

组合文件

/**
 * 组合请求http的请求
 */
import fetch from '@/utils/fetch'
import cmdName from './cmdName'
import { commonParams, url } from './commonParams'
export {
 fetch,
 cmdName,
 commonParams,
 url
}

导出的请求文件

import { fetch, cmdName, url, commonParams } from '@/api/common'
export function login (params: object) {
 return fetch({
  url: url(cmdName.login),
  method: 'post',
  data: commonParams({
   method: cmdName.login,
   params
  })
 })
}

使用接口方式

import * as API from '@/api/index'
API.login(params).then(res => {
})

store改造

vuex

的作用：分离远程记录加载到本地存储（操作）和 检索从

store

中的

getter

数据加载策略
细节/全局构造请求
导航响应
权限(配合router控制权限)

使用：

使用

module

形式
全局的一些操作，方法，放入

store

中，业务逻辑尽量少放，项目全局方法可以放入。例如：