将突变器提交到 vuex 存储时出现问题

Question

我有一个小问题，我正在发布一个HTTP请求，然后更新vuex存储，然后尝试清除组件的所有表单字段和实例变量(使用重置值功能(，不知何故，我的应用程序在更新商店之前清除了字段，然后它用空值更新商店，有什么问题吗？ 这是代码：

axios({
url: "/boards",
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: formData
}).then(() => {
this.$store.commit("addBoard", this.boardDetails)
this.resetValues() //clearing the values
});

这是商店中的突变：

addBoard: (state, payload) => state.boards.push(payload)

Answer 1

我猜boardDetails是一个对象，它是在 JS 中通过引用传递的，因此添加到存储区中boards数组的对象与在组件中保存表单状态的对象相同。

当您调用resetValues()时，您可能正在将boardDetails对象的属性设置回其默认值，这也反映在存储中(因为它在两者中是同一对象(。

您可以通过创建一个具有表单值的新有效负载对象来解决此问题：

this.$store.commit("addBoard", { ...this.boardDetails })