Stepping into the realm of Vue and Vuex, I find myself faced with a challenge. I am in the process of creating a customer list with multiple products. To make this possible, I have set up a customer array within my Vue component that includes a products array for adding multiple items. Upon saving a customer, I send it to the Vuex store and push it to the customer array in my state. However, an issue arises when I add a product item to the second customer, as Vue ends up adding the product items to all customers.
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);
}
};