vue 通过localStorage添加商品到购物车

取出本地购物车商品的数据
清空本地购物车数据

           // localStorage.removeItem('cartInfo');
           let cartInfo=localStorage.cartInfo?JSON.parse(localStorage.cartInfo):[];
           // find,查找
           let isHaveGoods=cartInfo.find(cart=>cart.goodsId==this.goodsId);
           console.log(isHaveGoods);
           if(!isHaveGoods){
               let newGoodsInfo = {
                   goodsId:this.goodsInfo.ID,
                   name:this.goodsInfo.NAME,
                   price:this.goodsInfo.PRESENT_PRICE,
                   image:this.goodsInfo.IMAGE1,
                   count:1
               };
                cartInfo.push(newGoodsInfo);
                localStorage.cartInfo=JSON.stringify(cartInfo);
                Toast.success('添加成功');
           }else{
               Toast.success('已有此商品');
           }
           this.$router.push({name:'Cart'})

得到购物车数据方法

               if(localStorage.cartInfo){
                   //判断本地缓存是否有购物车的数据
                   this.cartInfo=JSON.parse(localStorage.cartInfo);//字符串转化为对象
               }
               console.log("this.cartInfo"+JSON.stringify(this.cartInfo));
              this.isEmpty=this.cartInfo.length>0?true:false

通过计算属性来计算价格并保存起来

     computed:{
     /*tomoney不用再data里面声明在计算属性里面会监听data里面的值的变化动态改变*/
         tomoney(){
             let allMoney=0;
             this.cartInfo.forEach((item)=>{
                 allMoney +=item.price*item.count;
             })
             /**保存是字符串 */
             localStorage.cartInfo=JSON.stringify(this.cartInfo)
             return allMoney;
         }
     }
```js

你可能感兴趣的:(Vue)