在vue2中，要實(shí)現(xiàn)一些方法（增刪改查）一般都是寫在一起的。如下圖所示：

但是在vue3中，實(shí)現(xiàn)一個(gè)方法需要用到很多文件。

方法定義方法如下：??

export function classSign(phone: string) {return sign_request<Boolean>({url: `sign?phone=${phone}`,method: "get"})
}export function editBlogCount(data: BolgCountData) {return sign_request({url: "blog/blog-info-change",method: "post",data})
}

?

?service文件中定義方法

/** 創(chuàng)建請(qǐng)求方法 */
function createRequest(service: AxiosInstance) {return function <T>(config: AxiosRequestConfig): Promise<T> {const token = getToken()const defaultConfig = {headers: {// 攜帶 TokenAuthorization: token ? `Bearer ${token}` : undefined,"Content-Type": "application/json"},timeout: 5000,baseURL: "/sign-system",data: {}}// 將默認(rèn)配置 defaultConfig 和傳入的自定義配置 config 進(jìn)行合并成為 mergeConfigconst mergeConfig = merge(defaultConfig, config)return service(mergeConfig)}
}/** 用于網(wǎng)絡(luò)請(qǐng)求的實(shí)例 */
const service = createService()
/** 用于網(wǎng)絡(luò)請(qǐng)求的方法 */
export const sign_request = createRequest(service)

post請(qǐng)求中用到的參數(shù)在order.ts中定義：

//入?yún)⒍x
export interface NoSignStudentList {id: stringname: stringblogCount: numberblogAddress: string
}export interface BolgCountData {phone: stringblogCount: number
}//出參定義
export type GetTableResponseData = ApiResponseData<{list: GetTableData[]total: number
}>export type GetNoSignData = ApiResponseData<{noSignStudentListI: NoSignStudentList[]
}>

在vue文件中，首先給按鈕綁定點(diǎn)擊事件（此處和vue2相同）：

?之后在script中定義方法：

?到這里完整的方法就可以實(shí)現(xiàn)了，雖然比vue2稍微復(fù)雜一點(diǎn)，但是熟練后編寫更加方便。