1.api中发起请求
export const reqSubmitOrder = (a,data)=>requests({url:`/XXX/XXX/a?=${a}`,data,method:'post'});
2.main.js中引入一个统一接口的函数
// 统一接口api文件夹里面全部请求函数
import * as API from '@/api'
//全局事件总线的配置
new Vue({
render:(h)=> h(App),
//全局事件总线$bus配置
beforeCreate(){
//this就是vm
Vue.prototype.$bus = this;
//将函数挂载在Vue的原型对象上,可以直接引用API
Vue.prototype.$API = API;
}
})
打印可以看出这个函数
此时的组件管理数据不再是vuex而是组件中的data
//methods
async submitOrder() {
// 需要带参数
let { tradeNo } = this.orderInfo;
// 其余参数
let data = {
consignee: this.userDefaultAddress.consignee,//收件人
consigneeTel:this.userDefaultAddress.phoneNum,//收件人手机
deliveryAddress: this.userDefaultAddress.fullAddress,//收件人的地址
paymentWay: "ONLINE",//支付方式
orderComment: this.massage,//买家的留言信息
orderDetailList: this.orderInfo.detailArrayList,//买家购买清单
};
// 发请求
let result =await this.$API.reqSubmitOrder(tradeNo,data);
console.log(result);
},
// 路由跳转+传参
this.$router.push('/pay?tradeNo='+this.orderId);
补充
let {tradeNo} = this.orderInfo;
等效于
let tradeNo = this.orderInfo.tradeNo;
let {tradeNo: ID} = this.orderInfo;
等效于
let ID = this.orderInfo.tradeNo;