短視訊帶貨源碼，擷取購物車中所有商品清單并加載顯示

短視訊帶貨源碼中，擷取購物車中所有商品清單并加載顯示的相關代碼

<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
        }
      })
 
    }
  }
           

store.js

//每次先從本地中讀取購物車資料，放到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))
        }
    }
})
           

以上就是關于短視訊帶貨源碼中，關于擷取購物車中所有商品清單并加載顯示的相關代碼，更多内容歡迎關注之後的文章