Vue.js & vuex - 将表单重置为当前状态

Question

我的一个组件中有一个表单，我最初是通过克隆一个状态来填充的：

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

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

我尝试通过向按钮添加一个功能来做到这一点：

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

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

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)))
}

Vue.js & vuex - Reset a form to current state