如何在更新时制作 vuex 状态更新 UI？

Question

我正在使用 Vuejs 和 Vuex 构建购物车页面。购物车中的每件商品都应有一个数量计数器，以增加或减少为此特定商品订购的件数。当我从主产品页面将产品添加到购物车时，然后访问购物车页面。我点击柜台，产品数量发生了变化，但 UI 没有显示这种变化。它仅在我重新加载页面后显示更改，之后它可以仅显示对该特定计数器的任何新更改，并且我必须在添加每个产品后重新加载才能使其计数器显示 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或使用状态作为一种getter但没有运气。谁能确定我做错了什么？

Answer 1

在Vue.js 文档中：计算属性默认是 getter-only您尝试在没有set 方法的情况下更改计算属性的方式。可能发生的情况是，仅更改对象属性而不创建新属性可能不会触发更新 UI 的反应。我实际上建议采用另一种方法并将逻辑移动到存储的变异方法，仅传递您需要增加/减少的产品的 id。并且还使用一种在更新后返回一个全新对象的map()方法（比如我用来更改cartProducts.商店.js：import Vue from "vue";import Vuex from "vuex";import VuexPersist from "vuex-persist";Vue.use(Vuex);const vuexPersist = new VuexPersist({&nbsp; key: "my-app",&nbsp; storage: window.localStorage});export default new Vuex.Store({&nbsp; state: {&nbsp; &nbsp; cartProducts: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; name: "Drug 1",&nbsp; &nbsp; &nbsp; &nbsp; quantity: 1&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 2,&nbsp; &nbsp; &nbsp; &nbsp; name: "Drug 2",&nbsp; &nbsp; &nbsp; &nbsp; quantity: 1&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; },&nbsp; mutations: {&nbsp; &nbsp; INCREMENT(state, productId) {&nbsp; &nbsp; &nbsp; state.cartProducts = state.cartProducts.map(product => {&nbsp; &nbsp; &nbsp; &nbsp; if (product.id === productId) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; product.quantity += 1;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return product;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },&nbsp; &nbsp; DECREMENT(state, productId) {&nbsp; &nbsp; &nbsp; state.cartProducts = state.cartProducts.map(product => {&nbsp; &nbsp; &nbsp; &nbsp; if (product.id === productId) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; product.quantity -= 1;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return product;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; },&nbsp; actions: {&nbsp; &nbsp; incrementQuantity({ commit }, productId) {&nbsp; &nbsp; &nbsp; commit("INCREMENT", productId);&nbsp; &nbsp; },&nbsp; &nbsp; decrementQuantity({ commit }, productId) {&nbsp; &nbsp; &nbsp; commit("DECREMENT", productId);&nbsp; &nbsp; }&nbsp; },&nbsp; plugins: [vuexPersist.plugin]});购物车.js<template>&nbsp; <table>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr v-for="product in cartProducts" :key="product.name">&nbsp; &nbsp; &nbsp; &nbsp; <td class="quantity">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button @click="decreaseQuantity(product)">decrease</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{{ product.quantity || 0 }}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button @click="increaseQuantity(product)">increase</button>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table></template><script>export default {&nbsp; computed: {&nbsp; &nbsp; cartProducts() {&nbsp; &nbsp; &nbsp; return this.$store.state.cartProducts;&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; increaseQuantity(drug) {&nbsp; &nbsp; &nbsp; this.$store.dispatch("incrementQuantity", drug.id);&nbsp; &nbsp; },&nbsp; &nbsp; decreaseQuantity(drug) {&nbsp; &nbsp; &nbsp; this.$store.dispatch("decrementQuantity", drug.id);&nbsp; &nbsp; }&nbsp; }};</script>

Answer 2

请仔细阅读 vuex 文档。- https://vuex.vuejs.org/guide/ 改变状态应该发生在突变方法中。这是文档中的一个简单示例：const store = new Vuex.Store({&nbsp; state: {&nbsp; &nbsp; count: 0&nbsp; },&nbsp; mutations: {&nbsp; &nbsp; increment (state) {&nbsp; &nbsp; &nbsp; state.count++&nbsp; &nbsp; }&nbsp; },&nbsp; actions: {&nbsp; &nbsp; increment (context) {&nbsp; &nbsp; &nbsp; context.commit('increment')&nbsp; &nbsp; }&nbsp; }})