Vuex 和表單處理，如何在按下提交按鈕之前不更新 state

Question

我正在嘗試創建一個顯示來自 Vuex 商店的數據的表單，它允許用戶更新表單字段，然后在准備好時按提交。

到目前為止，我只看到過使用 v-model 和計算的get()和set()來讀取存儲值然后直接更新它們的教程。

但我想直觀地讓用戶更改表單，然后決定更新或取消。 取消會將表單基本上重置為原始 state 值。

到目前為止，我發現的只是 v-model 方法，它並不理想，因為它會將數據傳播到使用 state 值的任何地方。 因此，在用戶按下提交之前，它可能會影響邏輯

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

我只是無法弄清楚如何顯示當前的 state，但也只能在按下按鈕時以 Vue 的方式更新 state。 有沒有一個很好的教程呢？

骯臟的想法讓它更新一個臨時的state，當按下提交時，它將采用臨時的state並更新實際的state，並將其傳播到數據庫？

---

按照本教程https://medium.com/js-dojo/maintaining-a-single-source-of-truth-while-handling-form-data-with-vuex-426e86d16642

Answer 1

正如您在帖子底部所建議的那樣，您可以將表格 state 保留在本地。 當組件加載時，從存儲中獲取數據並將其復制到本地 state。 當用戶點擊保存時，您可以發送一個操作來發出 API 請求並更新存儲。

您也可以采用評論中提到的路線，但是如果用戶選擇放棄他們的編輯，您將需要從服務器重新加載原始值。