vue实现购物车添加同样商品合并显示一条数据，和更新购物车

淡淡的烟草味﹌ 2022-01-26 08:55 685阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70][]

然后我们再选择此商品，选择尺码26和数量为2，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 1][]

点击加入购物车，购物车页面的数据为：

![20190528165324718.png][]

购物车的效果便实现了。

实现思想是，首先定义一个存放购物车的cartInfo【】，然后往里添加数据。对购物车数据进行查找，如果返回的index == -1，说明购物车里没有这件商品，添加至购物车。否则，就更新对应下标商品的数据。

实现代码如下：

商品详情页（shoppingitem.vue）

import storage from '../model/storage.js';
    	export default {
    		data() {
    			return {
    				info:{},
    				value:'',
    				num:1,
    				currentSize:'',
    				cartInfo:[]
    			}
    		},methods:{
    			doAdd(info){
    					//添加商品数据至购物车
    			
    					 	查找购物车信息中有没有相同商品,
    					 	如果index == -1，代表没有找到相同商品，则添加至购物车
    					 	否则，更新商品信息
    					 * */
    					var index = this.cartInfo.findIndex((item)=>{
    							return item.id == this.$route.query.id
    						})
    					if(index == -1){
    						this.cartInfo.push(
    							{
    								id:this.$route.query.id,
    								name:this.info.itme_name,
    								img:this.info.src,
    								color:this.info.itemParams.color,
    								price:this.info.new_price,
    								num:this.num,
    								size:this.currentSize,
    								city:this.value,
    								totalPrice:this.num*this.info.new_price
    							})
    						storage.set('cartInfo',this.cartInfo);
    					}else{
    						this.cartInfo[index].num+=this.num;
    						this.cartInfo[index].size=this.currentSize;
    						this.cartInfo[index].city=this.value;
    						storage.set('cartInfo',this.cartInfo);
    					}
    					this.$router.push({path:'/shoppingcart'});
    				}
    		}

核心代码就是doAdd（）方法里面的代码了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70]: /images/20220126/8e3262aefc804673a21e143b9228cc0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 1]: /images/20220126/05a0c69e5815492bb6acc5e5331802bf.png
[20190528165324718.png]: /images/20220126/f59d96f32f70489992dab31209964b92.png