获取数据

获取store中所有的商品的id，然后拼接，如果购物车中没有任何商品，则返回，不需要请求任何数据，否则会报错

getGoodsList(){
    var idArr=[];
    this.$store.state.car.forEach(item=>idArr.push(item.id));
    if(idArr.length<=0){
        return
    }
}

[Vue warn]: Error in event handler for "click": "ReferenceError: state is not defined"报错
将 localStorage.setItem移动到store中
在商品详情页面点击购买时，就会在购物车界面相应的添加一个商品列表组件

getGoodsList(){
    var idArr=[];
    this.$store.state.car.forEach(item=>idArr.push(item.id));
    if(idArr.length<=0){
        return
    }
    this.$http.get("/api/goodsList"+idArr.join(",")).then(res=>{
        if(res.body.status===0){
            this.goodslist=res.body;
        }
    })
}

在数字选择框组件中，每当数量值改变，则立即把最新的数量同步到购物车store中，覆盖之前的数量值

countChanged(){
    // this.$emit('getcount',parseInt(this.$refs.numbox.value))
    this.$store.commit('updateGoodsInfo
',{id:this.goodsid,
        count:this.$refs.numbox.value

    })

}

获取当前商品的数量和id值

<numbox
        :initcount="$store.getters.getGoodsCount[item.id]"
        :goodsid="item.id"
></numbox>

同步更新商品详情和购物车中的数据

updateGoodsInfo(state,goodsinfo){
    state.car.some(item=>{
        if(item.id==goodsinfo.id){
            item.count=parseInt(goodsinfo.count)
            return true
        }
    })
    localStorage.setItem('car',JSON.stringify(state.car))

},

删除商品清单

点击删除把商品从store中根据传递的ID删除，同时把当前组件中的goodslist中对应要删除的那个商品使用index删除

remove(id,index){
      this.goodslist.splice(index ,1)
}

根据id从store的购物车中删除对应的商品数据

removeFormCar(state,id){
    state.car.some(item=>{
        if(item==id){
            state.car.splice(i,1)
            return true
            
        }
    })
    localStorage.setItem('car', JSON.stringify(state.car))

},

结算区域

设计结算区域样式

<div class="mui-card">
    <div class="mui-card-content">
        <div class="mui-card-content-inner jiesuan">
           <div class="left">
               <p>总计（不含运费）</p>
               <p>已勾选商品<span class="red">0</span>件，总价￥<span class="red">0</span></p>
           </div>
            <mt-button type="danger">结算</mt-button>
        </div>

    </div>
</div>

.jiesuan{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.red{
    color: red;
    font-weight: bold;
    font-size: 16px;
}

每当点击开关，把最新的开关状态，同步到store中

   selectedChange(id,value){
       this.$store.commit('updateGoodsSelected',{id,selected:val})

   }
<mt-switch v-model="$store.getters.getGoodsSelected[item.id]"
           @change="selectedChange(item.id,$store.getters.getGoodsSelected[item.id])"
>
</mt-switch>