javascript - 调度后在vue组件中更新相同状态时阻止状态更新

我是Vue和Vuex的新手，我正在创建拥有多种产品的客户列表。为了实现这一点，我在Vue组件中创建了一个客户数组，在其中有我要推送产品项以添加多个产品的产品数组。在节省客户方面，我只是将其分发到Vuex商店，然后将其推送到处于我的状态的客户阵列中。我的问题是，当我在第二个客户中添加产品项时，vuejs在所有客户中添加了产品项。

Vue组件

 data() {
    return {
      customer: {
        cus_name: ""
        cus_product: [
          {
            product_name: "",
          }
        ]
      }
    };
  },
  methods: {
    addProduct() {
      this.customer.cus_product.push({
        product_name: ""
      });
    },

    removeProduct(index) {
      this.customer.cus_product.splice(index, 1);
    },

    addCustomer() {
      this.$store.dispatch("addCustomer", this.customer);
    }
  }
};

Vuex商店

const state = {
    customers: []
};


const mutations = {
    addCustomer(state, customerData) {
        state.customers.push(customerData);
    }
};

const actions = {
    addCustomer(vuexContext, customerData) {
        vuexContext.commit('addCustomer', customerData);
    }
};

最佳答案

当您在addProduct()中添加产品时，您的代码不会说明应向谁添加产品。我的意思是您设置了cus_name: ""，并且添加产品时从未对此进行过更新。

我不知道您的整个应用程序的外观如何，但是可以肯定的是：我们需要告诉定义必须向其添加产品的客户：

addProduct() {
  // I add the product to the customer begueradj, for instance
  this.customer.cus_name = "begueradj"
  this.customer.cus_product.push({
    product_name: ""
  });
},

那是在您的Vue组件中。

现在，在商店的变化中，您必须首先查找名称为“ begueradj”的顾客，然后我们在这里遇到2种情况：


如果客户已经存在，则仅更新其产品列表
如果客户是新客户，则将其添加到客户列表中


用简单的Kabyle语言，这会将我们引向以下简单代码：

const mutations = {
  addCustomer(state, customerData) {
     // We check first if there is a customer whose name is the one we want to add products to:
     const customer = state.customer.find(customer => customer.cus_name === customerData.cus_name)
     if (customer) {
       // If we found him, then update his products list:
       customer.cus_product.concat(customerData.cust_product)
     } else {
       // Customer does not exist, then add him to the customers list
       state.customer.push(customerData)
     }
  }
};