Vue：在 API 调用失败后将数据对象重置为原始值

Question

我有一个 Vue 组件，它从远程 API 获取数据并将其传递给子组件。当用户单击按钮时，将调用 API 来提交数据。 API returns 更新数据对象并用新数据更新组件。到目前为止，还不错。

但我正在为错误案例而苦苦挣扎。如果 API 调用不成功，我需要将 apiData 对象“重置”为在 mounted() 函数中接收到的初始状态。否则，用户仍会看到她更改但实际上更新失败的值。

我想到了两个方法：

刷新 API 错误案例的数据
将最初接收到的数据复制到一个变量中，然后在错误情况下重新分配该变量

或者也许有一些更“Vue-ish”的方式来实现这个？

<template>
    <some-component v-model="apiData"></some-component>
</template>
data() {
    return {        
        apiData: {}
    }
},
mounted() {
   this.apiData = ApiService.getData();
},
methods: {
    async onSubmit() {
        try {
            const response = await ApiService.update(this.apiData);
            this.apiData = response.data;
        } catch (e) {
            showErrorNotification();
            // How to reset `apiData` to the initial state as in mounted() ???
        }     
    }
}

Answer 1

API 出错，return 没有给我们任何新结果。如果它没有 return 新结果，我们仍然有我们的旧数据（您想要的数据）我们不是在等这个吗？如果是这样，我们的问题是什么？

Vue：在 API 调用失败后将数据对象重置为原始值

Vue: Reset data object to original value after API call has failed

vue.js

vuejs2