Javascript Vuex和表单处理，如何在按下提交按钮之前不更新状态

我正在尝试创建一个表单，该表单显示Vuex存储中的数据，允许用户更新表单字段，然后在准备就绪时按submit

到目前为止，我只看到过使用v-model的教程，其中computed

get（）

和

set（）

读取存储值，然后直接更新它们

但是我想让用户直观地更改表单，然后决定更新或取消。取消将使窗体实质上重置为原始状态值

到目前为止，我所了解到的只是v-model方法，它并不理想，因为它将数据传播到使用状态值的任何地方。因此，在用户按下submit之前，它可能会影响逻辑

<v-text-field v-model="displayName"></v-text-field>

...

computed: {
...mapGetters(['currentUser']),
    displayName: {
        get() {
            return this.currentUser.name
        },
        set(value) {
            this.$store.dispatch('updateName', value);
        },
    },
}

...
计算：{
…映射获取程序（['currentUser']），
显示名称：{
得到（）{
返回此.currentUser.name
},
设置（值）{
此.store.dispatch（'updateName'，值）；
},
},
}

我只是不知道如何显示当前状态，而是用Vue的方式，只在按下按钮时更新状态。这方面有好的教程吗

Dirty idea让它更新一个临时状态，当按下submit时，它将获取临时状态并更新实际状态，并将其传播到数据库

---

---

按照您在文章底部的建议，遵循本教程，您可以在本地保留表单状态。当组件加载时，从存储中获取数据并将其复制到本地状态。当用户点击save时，您可以发送一个操作来发出API请求并更新存储

---

您也可以采用评论中提到的方法，但如果用户选择放弃编辑，则需要从服务器重新加载原始值。

我可能有顿悟。我可以让用户更新状态，然后有一个单独的操作来调用api来更新数据库。所以本地状态将被更改，直到他们再次登录，但是如果他们点击submit，它将把更改传播到数据库，这就是我在找到本教程后所做的。它在组件中保留一个本地副本，然后在提交表单时将其发送到存储区进行更新。