直接在购物车页面点击加减按纽是正常的，也会触发组件里面的watch方法来更新数据，但是如果我是从产品详情页面更新了vuex中cartList数据，再去到购物车页面就会出现图片上的样子，vuex中的数量已经更新，但是uni-number-box的数量不会同步，需要刷新一下页面才可以，我也是刚接触这块，不是很懂，还请大神们帮忙看看这种情况要怎么解决？不胜感激！
在vuex的mutations里面执行了一下方法更新了购物车中产品的数量
addCartList(state,obj){
const index = state.cartList.findIndex(item => {
if(obj.good.attributes.length > 0) {
return (item.id ==obj.good.id) && (item.attr_val == obj.specSelected.join(" "))
} else {
return item.id ===obj.good.id
}
})
if(index > -1) {
if(state.cartList[index].number + 1 > obj.stock){
uni.showToast({
title: '您已超出库存，无法再添加更多！'
});
return
}
state.cartList[index].number += 1
}else{
state.cartList.push({
id: obj.good.id,
image: this.baseUrl+obj.good.images[0].product_img_small,
attr_val: obj.specSelected.join(" "),
stock: obj.stock,
title: obj.good.product_name,
price: obj.good.price,
discount_price: obj.good.discount_price,
number:1,
checked:true
})
}
//持久化储存
this.commit('updateCartList',state.cartList);
// 通知购物车页面更新数据
uni.$emit('updateCart',state.cartList)
uni.showToast({
title: '添加成功!'
});
}购物车页面：
<uni-number-box
class="step"
:min="1"
:max="item.stock"
:value="item.number>item.stock?item.stock:item.number"
:isMax="item.number>=item.stock?true:false"
:isMin="item.number===1"
:index="index"
@eventChange="cartNumberChange"
></uni-number-box>
购物车数据直接通过...mapState引入
computed:{
discountText:function(){
let type = this.discount.discount_type === 1 ? '%' : '€';
return this.discount.discount_amount +''+ type;
},
...mapState({
loginStatus:state=>state.user.loginStatus,
userInfo:state=>state.user.userInfo,//登录用户信息
cartList:state=>state.cart.cartList,//购物车信息
allChecked:state=>state.cart.allChecked,//全选状态 true|false
empty:state=>state.cart.empty, //空白页现实 true|false
discount:state=>state.cart.discount, //获取满减折扣信息
}),
...mapGetters([
'cartTotal',
'discountTotal',
])
},
