4***@qq.com
4***@qq.com
  • 发布:2021-09-12 18:54
  • 更新:2021-09-12 23:17
  • 阅读:1070

在产品详情页更新了vuex中产品数量,购物车页面的uni-number-box数量不会更新

分类:uni-app

直接在购物车页面点击加减按纽是正常的,也会触发组件里面的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',  
			])  
		},
2021-09-12 18:54 负责人:无 分享
已邀请:
4***@qq.com

4***@qq.com (作者)

问题已解决,搞了一整天发现如果我直接使用props里面的value,数量就会同步,但是vue是不允许直接修改props的,会报错,所以我就在uni-number-box的watch里面增加了value的监听,只要value变了,就把新的值赋值给inputValue就好,希望能帮到跟我一样遇到这样问题的新手

data() {  
			return {  
				inputValue: this.value,  
				minDisabled: false,  
				maxDisabled: false  
			}  
		}  
  
watch: {  
			value(val) {  
				this.inputValue = val;  
			},  
			inputValue(number) {			  
				const data = {  
					number: number,  
					index: this.index  
				}  
				this.$emit('eventChange', data);  
			}  
		},

该问题目前已经被锁定, 无法添加新回复