好资源导航 » 文章资讯 » vuex实现的简单购物车功能示例

vuex实现的简单购物车功能示例

2023-08-29 02:51:04 269

本文实例讲述了vuex实现的简单购物车功能。分享给大家供大家参考，具体如下：

购物车组件

商品列表




@importurl('../../static/public.less');

选中商品列表




@importurl('../../static/public.less');
.dele-btn{
background-color:red!important;
}
.dele-btn:hover{
background-color:#bd0000!important;
}

vuex创建

npminstallvuex--save,创建vuex文件夹，在文件夹中创建store.js，引入vuex；

importVuefrom"vue";
importVuexfrom'vuex';
importcartfrom"./modules/cart";
Vue.use(Vuex);
exportdefaultnewVuex.Store({
modules:{
cart
}
})

建立一个模块文件夹modules，里面创建创建当个store模块，然后默认输出，在store.js中引入；

conststate={
shop_list:[{
id:11,
name:'鱼香肉丝',
price:12,
},{
id:22,
name:'宫保鸡丁',
price:14
},{
id:34,
name:'土豆丝',
price:10
},{
id:47,
name:'米饭',
price:2
},{
id:49,
name:'蚂蚁上树',
price:13
},
{
id:50,
name:'腊肉炒蒜薹',
price:15
}],
add:[]
}
constgetters={
//获取商品列表
getShopList:state=>state.shop_list,
//获取购物车列表
addShopList:state=>{
returnstate.add.map(({id,num})=>{
letproduct=state.shop_list.find(n=>n.id==id);
if(product){
return{
...product,
num
}
}
})
},
//获取总数量
totalNum:(state,getters)=>{
lettotal=0;
getters.addShopList.map(n=>{
total+=n.num;
})
returntotal;
},
//计算总价格
totalPrice:(state,getters)=>{
lettotal=0;
getters.addShopList.map(n=>{
total+=n.num*n.price
})
returntotal;
},
}
constactions={
//加入购物车
addToCart({commit},product){
commit('addCart',{
id:product.id
})
},
//清空购物车
clearToCart({commit}){
commit('clearCart')
},
//删除单个物品
deletToShop({commit},product){
commit('deletShop',product)
}
}
constmutations={
//加入购物车
addCart(state,{id}){
letrecord=state.add.find(n=>n.id==id);
if(!record){
state.add.push({
id,
num:1
})
}else{
record.num++;
}
},
//删除单个物品
deletShop(state,product){
state.add.forEach((item,i)=>{
if(item.id==product.id){
state.add.splice(i,1)
}
})
},
//清空购物车
clearCart(state){
state.add=[];
}
}
exportdefault{
state,
getters,
actions,
mutations
}

希望本文所述对大家vue.js程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

id	名称	价格	操作
{{item.id}}	{{item.name}}	{{item.price}}	加入购物车

id	名称	价格	数量	操作
{{item.id}}	{{item.name}}	{{item.price}}	{{item.num}}	删除
清空购物车

vuex实现的简单购物车功能示例

vuex-shopCart

已选商品

随机推荐

vuex实现的简单购物车功能示例

vuex-shopCart

已选商品

热门推荐

随机推荐