我正在使用 Vuejs 和 Vuex 構(gòu)建購物車頁面。購物車中的每件商品都應(yīng)有一個數(shù)量計數(shù)器，以增加或減少為此特定商品訂購的件數(shù)。當(dāng)我從主產(chǎn)品頁面將產(chǎn)品添加到購物車時，然后訪問購物車頁面。我點(diǎn)擊柜臺，產(chǎn)品數(shù)量發(fā)生了變化，但 UI 沒有顯示這種變化。它僅在我重新加載頁面后顯示更改，之后它可以僅顯示對該特定計數(shù)器的任何新更改，并且我必須在添加每個產(chǎn)品后重新加載才能使其計數(shù)器顯示 UI 更改。這是簡化的購物車 Vue 組件： <template >    <tbody>        <tr v-for="product in cartProducts" :key="product.name">            <td class="quantity">                <i class="fa fa-minus" @click="decreaseQuantity(product)"></i>                <p>{{product.quantity}}</p>                <i class="fa fa-plus" @click="increaseQuantity(product)"></i>            </td>        </tr>    </tbody></template><script>export default {    computed: {        cartProducts() {            return this.$store.state.cartProducts;        },    },    methods: {        increaseQuantity(drug) {            const existedDrug = this.cartProducts.find(d => d.id === drug.id);            existedDrug.quantity += 1;            this.$store.dispatch("setUserDataCart", this.cartProducts);            console.log(this.$store.state.cartProducts);        },        decreaseQuantity(drug) {            const existedDrug = this.cartProducts.find(d => d.id === drug.id);            existedDrug.quantity -= 1;            this.$store.dispatch("setUserDataCart", this.cartProducts);            console.log(this.$store.state.cartProducts);        },    },};</script>這是我的 vuex 商店：import Vue from "vue";import Vuex from "vuex";import VuexPersist from "vuex-persist";Vue.use(Vuex);const vuexPersist = new VuexPersist({  key: "my-app",  storage: window.localStorage});const store = new Vuex.Store({  state: {    cartProducts: []  },  mutations: {    SET_USER_CART(state, data) {      state.cartProducts = data;    }  },  actions: {    setUserDataCart({ commit }, data) {      commit("SET_USER_CART", data);    }  },  plugins: [vuexPersist.plugin]});export default store;我嘗試了多種方法，例如使用mapState或使用狀態(tài)作為一種getter但沒有運(yùn)氣。誰能確定我做錯了什么？