Vue.js 和 vuex - 将表单重置为当前状态答案

【问题标题】：Vue.js & vuex - Reset a form to current stateVue.js 和 vuex - 将表单重置为当前状态
【发布时间】：2017-10-31 17:37:24
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： vuejs2 vuex

【解决方案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)))
}

【讨论】：