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

【问题标题】：How to add product into the cart according to the stock in vuevue中如何根据库存将产品添加到购物车
【发布时间】：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;
            }

        },

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

【问题讨论】：

标签： vue.js vuejs2 vue-component vuex vuejs3

【解决方案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
        },
    }
}

【讨论】：