如何使用VueJS和Vuex重置表单元素

Posted 2021-03-30

我有一个用VueJs编写的“问答”组件，带有Vuex商店。每个答案都是<textarea>元素，如下所示：

<textarea class="form-control" rows="1" data-answer="1" :value="answer(1)" @change="storeChange"></textarea>

如您所见，通过调用answer()方法并将问题编号作为参数传递来设置控件的值。

更改答案后，将调用storeChange方法，并根据以下代码将更改缓存在临时对象（this.changes）中：

props : [
    'questionnaire'
],
methods : {
    answer(number) {
        if (this.questionnaire.question_responses &&
            (number in this.questionnaire.question_responses)) {
            return this.questionnaire.question_responses[number];
        }
        return null;
    },
    storeChange(e) {
        Vue.set(this.changes, e.target.dataset.answer, e.target.value);
    },
    save() {
        // removed for clarity
    },
    reset() {
        // what to do here?
    },
}

如果用户单击“保存”按钮，我将调度操作以更新商店。

如果用户想要将表单重置为其原始状态，我需要清除this.changes，这没问题，但我还需要“刷新”商店中的值。我该怎么做呢？

请注意，初始状态的来源questionnaire来自prop，而不是直接映射到商店的计算属性。这样做的原因是在一个页面上可以有多个“问题和答案”组件，我发现以这种方式传递状态更容易。

答案

您应该添加将在商店内清理状态的突变。示例：

mutations: {
 resetState(state) {
  state.yourDataName = state.yourDataName.map(currItem => {
   currItem = '';
   return currItem;
  });
 }
}

然后从您的组件中调用此突变：

methods: {
 update (e, type) {
  this.$store.commit('resetState');
 }
}

我不确定你的意思是那样的。