不使用vuex怎么存数据

128 阅读1分钟

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

打印可以看出这个函数

截屏2022-04-20 下午3.52.36.png

此时的组件管理数据不再是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);
    },

截屏2022-04-20 下午4.27.32.png

 // 路由跳转+传参
        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;