为什么当我更新商品数量时,我的Vuex getter(循环查看我的购物车商品并返回商品计数)没有更新?

我正在尝试创建一个Vuex getter,它将返回我的购物车中的商品总数,但是,我当前的实现似乎无法正常工作。

我有以下组件,用于显示购物车的商品计数:

<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 getter工作不正常,或者我的代码还有另一个问题。每当我添加 item1 ,当我添加时,计数器会上升 item2 ,计数器再次上升,但一旦我尝试添加 项目1 或 项目2 为了增加数量,计数器停止上升,我不太清楚为什么。

这是我的Vuex购物车模块,它具有getter和添加新项目的功能。

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
        }
    }
}