短视频带货源码，获取购物车中所有商品列表并加载显示

<template>
  <div >
    <div v-for="(item,index) in goodslist" :key="index">
      <p>{{item.name}}</p>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
        return {
            goodslist:[]
        } 
    },
    created(){
      this.getGoodsList()
    },
    getGoodsList(){
      //获取store中所有商品的id,拼接出一个 用逗号分隔出的  字符串
      var idArr=[]
      this.$store.state.car.forEach(item=>idArr.push(item.id))
      //如果购物车没有商品则返回，不请求接口，否则报错
      if(idArr.length<=0){
        return
      }
      this.$http.get("/api/goods/getshoplist/"+idArr.join(",")).then(res=>{
        if(res.body.status===0){
          this.goodslist=res.body.list
        }
      })
    }
  }
</script>

复制

//每次先从本地中读取购物车数据，放到store中
var car = JSON.parse(localStorage.getItem("car") || "[]")
var store=new Vuex.Store({
  state:{
    car:car
  },
    mutations:{
        addToCar(state,goodInfo){
            var flag=false
            //循环商品，如果存在数量相加
            state.car.some(item=>{
                if(item.id==goodInfo.id){
                    item.count+=parseInt(goodInfo.count)
                    flag=true
                    return true
                }
            })
            //如果循环最终还是false,则把商品数据直接push购物车中
            if(!flag){
               state.car.push(goodInfo)
            }
            //当更新car之后，存储到本地
            localstore.setItem("car",JSON.stringfy(state.car))
        }
    }
})

复制