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

在产品详情页更新了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);  
            }  
        },

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