2021-01-10

先写创一个新数组用来装等下要用的数据
state: {
shoplist:[]
},
2，在渲染的页面给购物车一个点击事件并把数据item传到state这个文件来add(item)
add(item){
// vuex写法
this.$store.commit(“add”,item)
// 调用vuex中的mutation add 并把item作为参数传过去
},
3，然后给装进刚创的空数组中
mutations: {
// 给shoplist数据
add(state,item){
state.shoplist.push(item)
}
},
4，现在就可以用这个数组了新拉一个面板循环数据展示出来

重复点击同一个就加一
let flag=false
state.shoplist.forEach(i=>{
if(i._iditem._id){
item.num++
flag=true
}
})
if(flagfalse){
item.num=1
state.shoplist.push(item)
}

加减
先拿插槽里面放加减按钮
<template #footer>
<van-stepper v-model=“item.num” :name=“item._id” @change=“change”/>

然后写点击事件change()
change里面有两个回调函数（val，detail）分别是num和id
然后把change事件和num id传入store中使用
methods:{
change(val,detail){
console.log(val,detail)
this.$store.commit(“change”,{num:val,id:detail.name})
}
}
store页面
change(state,obj){
console.log(obj)
state.shoplist.forEach(item=>{
if(item._id==obj.id){
item.num=obj.num
根据原本的_id和点加减的id相同来让他俩的num也相同
}
})
}