I am encountering a situation where once I add an object to an array, it becomes reactive to any changes made.
// actions.js
export const addToCart = ({ commit }) => {
commit('addToCart'); // successfully updates the state
setTimeout(function () {
commit('resetToppings');
}, 10000);
};
// mutations.js
export const addToCart = (state) => {
state.cart.push(state.orderItem);
};
export const resetToppings = (state) => {
state.orderItem.toppings = [];
};
// state.js
cart: [],
orderItem: {
quantity: 1,
toppings: [],
},
Although orderItem is correctly added to the cart, after 10 seconds when I call resetToppings, it resets both the toppings in the cart and the orderItem.
Is there a way to prevent resetToppings from affecting anything inside the cart?