Question

在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);
    }
};

Answer 1

当您在uid中添加产品时，您的代码没有说明应向谁添加产品。我的意思是您设置了SELECT EXTRACT(YEAR FROM CURRENT_DATE + ('1y'::interval * x))::text AS year FROM generate_series(-7, -1) AS x ;，并且在添加产品时从未对其进行过更新。

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

addProduct()

那是在您的Vue组件中。

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

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

使用普通的Kabyle语言，这将导致我们获得以下简单代码：

cus_name: ""

Answer 2

该问题与Vue或Vuex无关。这是因为Javascript通过引用而不是通过值分配数组和对象（非原始类型）。它传递确切的对象或数组而不是其副本，因此原始对象上发生的任何更改都会影响新对象或数组。

您可以尝试以下方法：

const mutations = {
    addCustomer(state, customerData) {
        const customerDataCopy = Object.assign({}, customerData);
        customerDataCopy.cus_product = [].concat(customerData.cus_product);
        state.customers.push(customerDataCopy);
    }
};

或者您可以使用一个模块来创建非原始类型的深层副本，例如deep-copy npm软件包（0 deps软件包），以避免此类问题。

const dcopy = require('deep-copy');
const mutations = {
    addCustomer(state, customerData) {
        const customerDataCopy = dcopy(customerData);
        state.customers.push(customerDataCopy);
    }
};

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

2 个答案: