vue中如何根据库存将产品添加到购物车

Posted 2023-02-16

【中文标题】vue中如何根据库存将产品添加到购物车

【英文标题】：How to add product into the cart according to the stock in vue

【发布时间】：2021-12-03 15:59:49

【问题描述】：

我正在尝试将产品添加到我的购物车中，但前提是数量少于库存。所以当我点击添加到购物车按钮时，我会得到一个像这样的对象：

所以金额是由用户获得的。但是如果库存小于数量，我不想将产品添加到购物车中。

为此我的购物车助手：

getCart: function (callback = undefined) 
        return apiHelper.getRequest(
            "/carts",
            (response) => 
                document.cookie = `$this.cartCookieName=$response.data.attributes.cart_guid;`;
                this.cookieValue = response.data.attributes.cart_guid;
                if (callback)  callback(response); 
            
        )
    ,

    addToCart: function (product, variation_id, amount, callback = undefined) 
        if(this.cookieValue == "") 
            this.getCart(() => 
                this._addToCart(product, variation_id, amount, callback);
            );
         else 
            this._addToCart(product, variation_id, amount, callback)
        
    ,

    _addToCart(product, variation_id, amount, callback = undefined) 
        return apiHelper.postRequest(
            `/carts/$this.cookieValue/add-item`,
            (response) => 
                document.cookie = `$this.cartCookieName=$response.data.attributes.cart_guid;`;
                if (callback)  callback(response); 
            ,
            
                product_id: product,
                variation_id: variation_id,
                amount: amount,
            
        )
    ,

我在这里调用购物车并将 id 存储在 cookie 中。根据该 ID，我正在与 body 进行另一次通话，将产品放入购物车。 要将产品放入购物车，我也在使用 Vuex，这是我的突变：

export const ADD_TO_CART = (state, product, variation, amount) => 
    let productInCart = state.cart.find(item => 
        return item.product.id === product.id;
    );
    if(productInCart) 
        productInCart.amount += amount;
        return;
    
    state.cart.push(
        product,
        variation,
        amount
    )

这是我在 Product 组件中的 addToCart 函数：

addToCart: function () 
            let amount = this.itemsCount !== "" ? this.itemsCount : 1;
            if(this.variationId != null) 
                this.warningMessage = false;
                cartHelper.addToCart(this.product.id, this.variationId, amount, (response) => 
                    this.$store.dispatch('addProductToCart', 
                        product: this.product,
                        variation: this.variationId,
                        amount: parseInt(amount)
                    )
                );
             else 
                this.warningMessage = true;
            

        ,

我真的很困惑我应该在哪里检查库存是否足够，产品可以添加到购物车中。如果你能帮我解决这个问题，我会很高兴的。

【参考方案1】：

看起来突变的product 参数包含库存计数，因此您可以在突变中执行检查：

export const ADD_TO_CART = (state, product, variation, amount) => 
    if (amount > product.attributes.stock) 
      return
    
    ⋮
    // add to cart

或者您可以在调度之前在Product 组件中执行此操作：

export default 
    methods: 
        addToCart: function () 
            let amount = this.itemsCount !== "" ? this.itemsCount : 1;
            if (amount > this.product.attributes.stock) 
                return;
            
            ⋮
            // dispatch action
        ,