Запретить обновление состояния при обновлении компонента vue после отправки

Question

Я новичок в этом мире Vue и Vuex, я создаю список клиентов, имеющих несколько продуктов. Чтобы добиться этого, я создал клиентский массив в компоненте Vue, в котором у меня есть массив продуктов, в который я нажимаю элементы продукта, чтобы добавить несколько продуктов. Спасая клиента, я просто отправляю его в магазин Vuex и отправляю в массив клиентов в моем штате. Моя проблема заключается в том, что, когда я добавляю товар во второго покупателя, vuejs добавляет товар во всех покупателях.

Vue Component

 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 Store

const state = {
    customers: []
};


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

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

Answer 1

Когда вы добавляете товар в 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 случая:

1. Если клиент уже существует, обновите только его список продуктов
2. Если клиент новый, то добавьте его в список клиентов

На простом кабильском языке это привело бы нас к следующему простому коду:

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

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 package (пакет 0 deps), чтобы избежать подобных проблем.

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