短视频带货源码中，获取购物车中所有商品列表并加载显示的相关代码
<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))
}
}
})
以上就是关于短视频带货源码中，关于获取购物车中所有商品列表并加载显示的相关代码，更多内容欢迎关注之后的文章
