好资源导航 » 文章资讯 » vuex实现购物车的增加减少移除

vuex实现购物车的增加减少移除

2023-07-22 10:50:13 92

本文实例为大家分享了vuex实现购物车增加减少移除的具体代码，供大家参考，具体内容如下

1.store.js（公共的仓库）

importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)

exportdefaultnewVuex.Store({
state:{
carList:[]//购物车的商品
},
mutations:{
//加
addCar(state,params){
letCarCon=state.carList;
//判断如果购物车是否有这个商品，有就只增加数量，否则就添加一个
//some只要有一个isHas为true,就为true
letisHas=CarCon.some((item)=>{
if(params.id==item.id){
item.num++;
returntrue;
}else{
returnfalse;
}
})

if(!isHas){
letobj={
"id":params.id,
"title":params.title,
"price":params.price,
"num":1,
}
this.state.carList.push(obj)
}
},
//减
reducedCar(state,params){
letlen=state.carList.length;
for(vari=0;i{
money+=item.price*item.num
})
returnmoney;
}else{
return0;
}
},
//返回购物车的总数
carCount(state){
returnstate.carList.length
}
},
})

2.list.vue(商品列表)

3.car.vue(购物车)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vuex实现购物车的增加减少移除

热门推荐

随机推荐