Vue.js＆amp; vuex - 将表单重置为当前状态

Question

我的一个组件中有一个表单，我最初通过使用以下方式克隆一个州来填充：

created () {
  this.currentUser = Object.assign({}, this.$store.getters.user)
}

我想在表单中添加一个按钮，使用户可以在更改后将其重置为初始值。

我尝试通过向按钮添加功能来实现此目的：

methods: {
  cancelChanges () {
    this.currentUser = Object.assign({}, this.$store.getters.user)
  }
}

但是，这不起作用。这样做的正确方法是什么？

Codepen在这里 - https://codepen.io/stockzy/pen/xPGYXN?editors=1010#0

Answer 1

好的，我想出来了（稍微帮忙）。

我将数据绑定到商店，而不是将新实例复制到组件。这修好了它：

created () {
  this.currentUser = Object.assign({}, JSON.parse(JSON.stringify(this.$store.getters.user)))
}

和按钮相同：

cancelChanges () {
  this.currentUser = Object.assign({}, JSON.parse(JSON.stringify(this.$store.getters.user)))
}