赞
踩
点击 加入购物车 的时候,先发请求,把数据存储到服务器,然后再进行路由跳转
// src/api/index.js
// 将产品添加到购物车中(或者 更新某一个产品个数)
// /api/cart/addToCart/{ skuId }/{ skuNum } POST 带参数
export const reqAddOrUpdateShopCart = (skuId,skuNum)=>{
return requests({
url:`/cart/addToCart/${
skuId}/${
skuNum}`,method:'POST'})
}
派发actions,发请求
// src / pages / detail /index.vue
<div class="add">
<!-- 以前的路由跳转,从A路由跳转到B路由 -->
<!-- 在这里路由跳转,进行路由跳转之前,需要发请求 把你购买的产品信息通过请求的形式通知服务器,服务器进行相应的存储 -->
<a @click="addShopcar">加入购物车</a>
</div>
// 加入购物车的回调函数
addShopcar() {
// 1. 发请求--将产品加入到数据库(通知服务器)
// 服务器存储成功----进行路由跳转
// 失败,给用户提示
this.$store.dispatch( "detail/addOrUpdateShopCart",{
skuId:this.$route.params.skuId,skuNum:this.skuNum});
},
加入购物车以后(发请求),前台将参数带给服务器
服务器写入数据成功,并没有返回其他的数据,只是返回code=200,代表这次成功
⚠ !!!因为服务器没有返回其余的数据,所以我们不需要vuex来存储数据
将参数带给服务器
const actions = {
// 将产品添加到购物车中
async addOrUpdateShopCart({
commit},{
skuId,skuNum}){
// 加入购物车返回的结果
let result = await reqAddOrUpdateShopCart(skuId,skuNum);
console.log('购物车',result);
// 加入购物车以后(发请求),前台将参数带给服务器
// 服务器写入数据成功,并没有返回其他的数据,只是返回code=200,代表这次成功
// 因为服务器没有返回其余的数据,所以我们不需要vuex来存储数据
},
};
async
:只要有async返回的就是Promise,Promise返回的不是成功就是失败
发请求–将产品加入到数据库(通知服务器)
服务器存储成功----进行路由跳转
服务器存储失败------给用户提示
// src/pages/detail/index.vue // 加入购物车的回调函数 async addShopcar() { // 1. 发请求--将产品加入到数据库(通知服务器) // 服务器存储成功----进行路由跳转 // 失败------给用户提示 try { await this.$store.dispatch("detail/addOrUpdateShopCart", { skuId: this.$route.params.skuId,skuNum: this.skuNum,}); // 成功了进行路由跳转 ..... } catch (error) { alert(error.message); } },
this.$store.dispatch("detail/addOrUpdateShopCart", {skuId: this.$route.params.skuId,skuNum: this.skuNum,});
表示调用了addOrUpdateShopCart
这个函数,声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/69897
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。