Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）

一、前言

在上篇购物车中，如果用户刷新了当前的页面，底部导航中的数据又会恢复为原来的：

1、解决刷新，购物车上数值不变

                                                          2、在购物车点击加减按钮，数值做出对应变化

二、主要内容

1、实现效果：点击购物车的时候可以查看到购物车的商品信息

2、解决刷新，购物车上数值不变

　　（1）新建一个Cart.vue展示购物信息，并将路由添加到index.js中

　　（2）购物车里面涉及到：存储商品信息，获取商品信息，保存商品信息，这里将这些方法单独封装到一个.js文件中（本来需要在后台操作）

let obj={}; //定义一个对象，存储商品信息

//这里需要存储数据
//{商品的id, 商品的数量}

//保存商品
obj.saveGoods = function(goodsList){
    window.localStorage.setItem('goodsList',JSON.stringify(goodsList))
}

//获取商品的值
obj.getGoodsList = function(){
    return JSON.parse(window.localStorage.getItem('goodsList'|| '{}'))//如果stroge中没有值，返回一个空对象
}

//增加商品
obj.add = function(goods){
    let goodsList = this.getGoodsList()//获取到storage里面的对象
    if(goodsList[goods.id]){

        //goods.id是商品的数量，对应有值的话就追加
        goodsList[goods.id] = goodsList[goods.id] + goods.num;
    }else{
        goodsList[goods.id]=goods.num;
    }

    //传进来之后还需要保存
    this.saveGoods(goodsList);
} 

//获取购物车的总数量
obj.getTotalCount = function(){
    let goodsList = this.getGoodsList();
    let values = Object.values(goodsList);//Object.values返回的是一个数组，里面对应着每一个key的value
    let sum = 0;
    values.forEach(val => sum = sum +val);
    return sum;

}

export default obj;

　　（2）封装好了方法就要在商品详情页面使用（类似于我们在淘宝上买东西，当你在商品详情页面点击加入购物车之后，购物车里面会有对应的商品）

 name:'GoodsDetail',
        data(){
            return{
                url:`getthumImages/${this.$route.params.id}`,
                goodsInfo:{},//当前购物车的信息，里面有id
                pickNum:1 ,
                isExist:false //让小球默认是隐藏的状态，
            }
        },
        methods:{
            afterEnter(){
                this.isExist=false; //显示出来之后执行这个，又将小球隐藏
                this.$bus.$emit('sendPickNum',this.pickNum);

                //当触发了上面的事件之后，
                GoodsTool.add({
                    id:this.goodsInfo.id,
                    num:this.pickNum
                })
            },
            //点击加入购物车执行这个方法，然后让小球显示出来
            ballHandler(){
                this.isExist=true;
              //  this.$bus.$emit('sendPickNum',this.pickNum); //将当前的pickNum传过去，但是这个不能加在这里，否者一点击“加入购物车就传
            },
            

　　（3）当你一刷新，stroge里面的数据清空，下面的购物车上面的数值又变成0了，所以在下面的底部导航里，让他一开始就获取到当前这个总数

created(){
    //当你的组件一创建好了后就挂载这个bus公交车，$on这个事件监听
    this.$bus.$on(`sendPickNum`, (data)=>{
      this.pickNum=this.pickNum + data; /
    }),

    this.pickNum=GoodsTool.getTotalCount();//直接将这Goods.vue里面传来的数据赋值，
  }

　　（4）通过以上思路，就能保证刷新页面时，购物车中的数据不发生改变

3、点击底部导航“购物车”，将上面加进的东西和数量展示在页面中，（在购物车点击加减按钮，数值做出对应变化）

　　（1）首先发送请求，这里发送请求的时候，需要之后再购物详情页面加入的商品的id, 然后根据对应的id拿到对应的请求数据

　　（2）拿到购物详情里面的id

let goodsList = GoodsTool.getGoodsList();//["88":5,"99":4] 第一个数商品id 第二个是商品数量
            let ids = Object.key(goodsList).join(',');//Object.key()获取key值 [88,99]

　　（3）拿到上面的id之后就可以发请求

created(){
            let goodsList = GoodsTool.getGoodsList();//{"88":5,"99":4} 第一个数商品id 第二个是商品数量
            let ids = Object.key(goodsList).join(',');//Object.key()获取key值 [88,99]
            if(ids){
                this.$axios.get(`goods/getshopcarlist${ids}`)
                .then(res=>{
                    this.shopCart=res.data.message;

                         }
                })
         }

　　（4）但是这里的后端数据库里并没有保存加入购物车的数量（如果有可以直接从后端获取），这里手动添加

created(){
            let goodsList = GoodsTool.getGoodsList();//{"88":5,"99":4} 第一个数商品id 第二个是商品数量
            let ids = Object.key(goodsList).join(',');//Object.key()获取key值 [88,99]
            if(ids){
                this.$axios.get(`goods/getshopcarlist${ids}`)
                .then(res=>{

                    this.shopCart=res.data.message;//返回的是一个数组
                  //给数组元素添加属性
                  for(var i=0; i<this.shopCart.length;i++){
                      let shop=this.shopCart[i];//获取到当前的对象
                      let num = goodsList[shop.id];//根据当前对象的id查找到对应的购物车数量

                        shop.num = num;//给每个对象添加一个num属性，并在视图上渲染，但是会发现视图上的值并没有改变

                      }

                  }
                })
            }

　　（5）在购物车列表做加减操作，并且将当前的对象传进去

 <li class="p-list" v-for="(shop, index) in shopCart">
                    <mt-switch></mt-switch>
                    <img src="">
                    <div class="pay-calc">
                        <p>{{shop.title}}</p>
                        <div class="calc">
                            <span>￥777</span>
                            <span @click="substract(shop)">-</span>
                            <span>{{shop.num}}</span>
                            <span @click="addNum(shop)">+</span>
                            <a href="javascript:;">删除</a>
                        </div>
                    </div>
                </li>

methods:{
            addNum(shop){//每次点击都接受到当前的对象
                shop.num++; //这里的值虽然加上了，但是，数据并没有响应上去，是因为created是一开始就加载的，后来点击修改了num的值，但是没有 响应视图
                console.log(shop)
            },
            substract(shop){
                if(shop.num==1){
                    return;
                }

                shop.num--;

            }

        },

　　（6）做完第五步，在测试的时候，发现控制台中打印出来的对象中num改变，但是视图上并没有改变

　　　　原因：vue 中存在一种机制会将shopCart(也就是你请求的数据进行监视)属性进行监视，完成响应式（因为后面的num是我们自己加进去的，没有挂载到数据属性里面,vue就会对这个属性进行监视，监视到数据不是完全挂载到数据属性上的，就无法完成响应操作）

在vue中的源码中会生成 Object.defineProperty(this, 'shopCart', {   set:function(){   //判断shopCart元素是否有属性  })

　　　　解决方法：如果数据不完整挂载的情况在要添加属性，就需要手动通知vue完成响应式，==》双向数据绑定

created(){
            let goodsList = GoodsTool.getGoodsList();//{"88":5,"99":4} 第一个数商品id 第二个是商品数量
            let ids = Object.key(goodsList).join(',');//Object.key()获取key值 [88,99]
            if(ids){
                this.$axios.get(`goods/getshopcarlist${ids}`)
                .then(res=>{

                    this.shopCart=res.data.message;//返回的是一个数组
                  //给数组元素添加属性
                  for(var i=0; i<this.shopCart.length;i++){
                      let shop=this.shopCart[i];//获取到当前的对象
                      let num = goodsList[shop.id];//根据当前对象的id查找到对应的购物车数量

                      if(num){
                          shop.num = num;

                          this.$set(shop, 'num', num);//自己给这个数据进行双向数据绑定
                          this.$set(shop,'isSelected',true);
                      }
                  }
                })
            }

三、总结

踩坑一：自己收动添加的属性,需要用$set()给这个属性绑定

踩坑二：vue 中存在一种机制会将shopCart(也就是你请求的数据进行监视)属性进行监视，完成响应式（因为后面的num是我们自己加进去的，没有挂载到数据属性里面,vue就会对这个属性进行监视，监视到数据不是完全挂载到数据属性上的，就无法完成响应操作）