在 Vuex 中使用计算绑定时，清除表单的优雅方法是什么？

Question

表单绑定可以像下面这样优雅地设置：

myVmodelName: {
    get(){
       return this.$store.state.someSate;
    },
    set(val){
       this.$store.dispatch('updateMyState', val)
    }
}

这些被传递到一个独立的模块中，目的是仅保存有关表单的数据：

const state = {
    name: '',
    someState1: '',
    someState2: '',
    // etc....
}

const mutations = {
    UPDATE_NAME(state, name){
        state.name = name;
    }
}

const actions = {
    updateName({commit}, name){
      commit('UPDATE_NAME', name)
    }

}

export default {
    state,
    mutations,
    actions
}

这又可以绑定到 Vuex 中的一个模块，该模块将保存我们所有的表单状态。我的问题是给出了一个包含大量输入的表单，是否有一种优雅的方法可以从本质上将状态清除回默认状态，而不必编写一个非常长的方法来清除表单？

Answer 1

首先，我认为使用操作进行绑定不是一个好主意。

action 本质上是一个异步任务。所以用户不会得到正确的反馈。

如果这确实是您所需要的，一种可能性是对设置进行去抖动。（参见 lodash _.debounce）或者其他可能性是使用 lazy 修饰符。

由于您绑定了所有 get，我建议使用修饰符 reset 状态并使 reset 逻辑靠近商店。

this.$store.commit('reset');

在店里你可以做：

const initState = { ... }

export default {
    Object.assign({}, initState),
    mutations,
    actions
}

mutations = {
     reset (state) {
         Object.assign(state, initState);
     }
}

在 Vuex 中使用计算绑定时，清除表单的优雅方法是什么？

What is an elegant approach to clearing a form when using computed Bindings in Vuex?

vue.js

vuejs2

vuex