Блог

Я пытаюсь создать получатель Vuex, который вернет общее количество товаров в моей корзине покупок, однако моя текущая реализация, похоже, работает некорректно.

У меня есть следующий компонент, в котором я пытаюсь отобразить количество товаров в корзине:

 <template>
    <div class="nav">
        <div class='wrapper'>
            <ul class='nav-ul'>
                <router-link to="/cart" tag='li'>Cart({{ cartItemsCount }})</router-link>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        computed: {
            cartItemsCount(){
                return this.$store.getters.cartItemCount
            }
        }
    }
</script>
  

Проблема в том, что либо мой cartItemCount получатель работает неправильно, либо в моем коде есть другая проблема. Всякий раз, когда я добавляю item1 , счетчик увеличивается, затем, когда я добавляю item2 , счетчик снова увеличивается, но как только я пытаюсь добавить item1 или item2 снова, чтобы увеличить количество, счетчик перестает расти, и я не совсем уверен, почему.

Это мой модуль корзины Vuex, в котором есть получатель и функция, добавляющая новый товар.

 const cart = {
    state: {
        cart: [
            {
                id: 1,
                name: 'test1',
                quantity: 2
            },
            {
                id: 2,
                name: 'test2',
                quantity: 1
            }
        ]
    },
    mutations: {
        ADD_CART_ITEM(state, part) {
            let productInCart = state.cart.find(item => {
                return item.id === part.id
            })

            if (productInCart) {
                productInCart.quantity  = part.quantity
            } else {
                state.cart.push(part)
            }
        },
    },
    getters: {
        cartItemCount: state => {
            let itemCount = 0

            state.cart.forEach(item => {
                itemCount  = item.quantity
            });

            return itemCount
        }
    }
}