接口:添加到购物车时候是把当前商品的id添加进去
示例api: /api/goods/getshoplist/87,88,89
<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.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))
}
}
})