一、商品信息和购物车是两个页面

1、商品数据

2、商品数据通过vue传参将数据传之购物车页

3、购物车视图

4、监听购物车内的变化
使用watch对购物车内的数组进行监听，当它发生变化的时候（数组中有数据添加或者删除时）会执行watch，对从商品页传递过来的商品数据进行本地存储。

5、购物车页对数据进行获取
在获取信息的同时对购物车内的商品数量进行判断

注释：自己理解的思路

• 定义两个变量，一个获取接收到的新加的商品数据，一个定义数值。
• for循环并判断传过来的数据id和购物车内的数据id是否一致。
• 最后在判断商品是存在,还是不存在.存在则对其进行+1,不存在则对其进行新加数据

6、选择事件

7、价格

8、删除数据

二、商品信息和购物车在同一个页面

1、写商品信息数据

2、点击加入购物车按钮，将数据加入到购物车内部（此处购物车与商品信息写在同一个页面内）

• 添加按钮
  
• 添加按钮的方法

<script>
  export default{
	methods:{
      //点击添加按钮，将数据添加到购物车(即空数组baskets)中去，并对数量就行添加
      addFood(row){
        let boo = false;
        let index = 0;
        //index是如果存在这个产品 这个产品在baskets中的索引值
        for(let i=0;i<this.baskets.length;i++){
          console.log(i,this.baskets[i],this.baskets[i].id,row.id,"sss")
          //i=0;此时this.baskets.length=0;不执行for循环，在购物车内添加一条新数据
          //i=0;此时this.baskets.length=1;执行for循环。执行if判断，this.baskets[0].id == row.id，不等时boo=false，执行for循环外的if-else中的else语句，
          // 之后继续执行for循环，此时i=1；
          //this.baskets[0].id是数组baskets的第一条数组的id，而row.id是所点的数据的id；每次执行都会将点击到的id值和已经在购物车内的数据id值进行比对
          //如果baskets数组中的索引的id数值和传过来的row的id数值一样，则boo=true，执行下边的if判断，商品数量+1
          if(this.baskets[i].id == row.id){
            //则index的数值等于baskets数组中的索引值，判断是那个数据进行数量叠加
            index = i
            boo = true
          }
        }
        //此处boo=true
        if(boo){
          //通过声明的index来改变baskets中index下标的num 当商品存在的时候，对商品的数量进行叠加
          this.baskets[index].num=this.baskets[index].num+1
        }else{
          //此处boo=false
          //push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
          this.baskets.push({
            select:false,
            id:row.id,
            name:row.name,
            size:row.size,
            price:row.price,
            num:row.num
          })
        }
        this.totalPrice()
        this.initSelect()
      },
    }
  }
</script>

3、购物车布局以及方法

• 全选事件
  

• 选择商品
  

• 方法
  

• 总金额方法
  

• 删除数据方法
  
  删除数据的时候，全选状态和商品金额都会更新，因此需要使用调用两个方法。

• 计数
  商品在购物车中进行数量的加减，在加减的同时发生了变化，因此使用change方法，并在其发生变化的时候，对商品的金额进行更新
  
  购物车整体效果图如下：