同步徽标

1. 将购物车的数据用一个数据存储起来，在car数组中，存储一些商品的对象 ，id：商品的id，count：要购买的数量，price：商品的单价，selected：false商品在 购物车中是否被选中

state:{
   car:[]
},

2. 拼接出一个要保存到store中car数组里的商品对象信息（直接在加入购物车按钮绑定的方法中定义）

addToShopCar(){
    this.ballFlag=!this.ballFlag
    var goodsinfo={
        id:this.id,
        count:this.selectedCount,
        price:this.goodsinfo.price,
        selected:true
    }


},

3. 点击加入购物车，把商品的信息保存到store的car上，如果购物车中有这个对应的商品了就只需要更新数量，如果没有，则直接把商品数据push到car中

mutations:{
    addToCar(state,goodsinfo){
        var flag=false
        state.car.some(item=>{
            if(item.id==goodsinfo.id){
                item.count+=parseInt(goodsinfo.count)
                flag=true
                return true
            }
        })
        if(!flag){
            state.car.push(goodsinfo)
        }
    }

},

4. 调用store中的mutations来讲商品加入购物车

this.$store.commit("addToCar",goodsinfo)

5. 实现徽标的自动更新，在getter中使用方法让所有商品数量相加，并把它同步到页面中

getter:{
    getAllCount(state){
        var c=0
        state.car.forEach(item=>{
            c+=item.count
        })
        return c
    }

}

<span class="mui-badge" id="badge">{{$store.getters.getAllCount}}</span>

6. 实现购物车的本地持久存储，当更新car后，把car数组存储到本地的localStorage中，在加入购物车方法中添加

localStorage.setItem('car',JSON.stringify(state.car))

7. 从本地取出之前存储的car数据，在main.js中操作

localStorage.getItem('car')||'[]'

---

绘制购物车页面的商品列表

1. 使用mui中的card样式先简略制作 商品卡片和结算价格两部分

   
   

2. 使用mint-ui中的switch组件设置一个勾选按钮，用于勾选是否结算价格再设置一个数字选择框用于购物车界面

<div class="goods-list">

    <div class="mui-card">
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <mt-switch v-model="value"></mt-switch>

                <img src="../../images/小米.jpg" height="728" width="446"/></div>
            <div class="info">
                <h1></h1>
                <p>
                    <span class="price">$2199</span>
                    <numbox></numbox>
                    <a href="#">删除</a>
                </p>
            </div>
        </div>
    </div>
</div>

<style scoped>
    .shopcar-container{
        background-color: #eee;
        overflow: hidden;
    }
    .goods-list img{
        width: 60px;
        height: 60px;
    }
    h1{
        font-size: 13px;
    }
.price{
    color: red;
    font-weight: bold;

}
    .mui-card-content-inner{
        display: flex;
        align-items: center;

    }
    .info{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
</style>

---