Question

我面临的一个问题是，在将对象推送到数组后，它将对变化做出反应。

// actions.js
export const addToCart = ({ commit }) => {
    commit('addToCart'); // properly commits to change 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: [],
},

orderItem被正确推送到cart，但是在我resetToppings后10秒，它会重置cart内以及{orderItem内的配件1}}。

如何确保resetToppings不会改变cart内的任何内容？

Answer 1

当你按state.orderItem时，你会在数组中添加对它的引用。因此，当state.orderItem发生更改时，数组内的元素会发生更改，因为它（数组中的元素）实际上仍然指向同一个（state.orderItem）对象。

您可以改为推送orderItem对象的浅层克隆：

// mutations.js
export const addToCart = (state) => {
    state.cart.push({...state.orderItem});
};

这种方式添加到数组中的是另一个对象。

注意：你可以这样做：

state.cart.push({...state.orderItem});

但是，只有在调用toppings后才直接从{{1>}数组删除/添加元素时，这才有效。也就是说，如果您在向addToCart添加新元素之前调用resetToppings（这将有效，因为toppings会分配一个新数组）。

如果情况并非总是如此，我的意思是，如果您在调用resetToppings之后有时直接编辑toppings数组，您可能希望克隆它：

addToCart

将项目推送到数组似乎是对旧对象的反应

1 个答案: