javascript - 将 Vuex 与 Vuelidation 一起使用的正确方法

Question

我正在为一个应用程序开发 Vue 前端，该应用程序需要在提交到后端之前在本地保存所有表单数据，以防网络连接问题导致服务中断。我正在使用 Vuex 来维护整个应用程序中的所有表单数据，以便可以根据需要将其保存到本地存储或从本地存储中恢复。
第二个要求是表单验证，为此我打算使用 Vuelidate 库。文档建议使用没有 v-model 的 Vuelidate , 只需要 this.$v.touch()在事件函数中。这就是我尝试过的，但它似乎不起作用。
请参见下面的示例:

<template>
  <form>
    <input name="full-name" v-model="fullName" placeholder="Full Name" />
  </form>
</template>

<script>
  export default {
    name: "AForm"
    computed: {
      fullName: {
        get() { return this.$store.state.fullName }
        set(name) {
          this.$v.touch();
          this.$store.dispatch("updateFullName", name);
        },
      }
    },
    validations: {
      fullName: minLength(4);
    }
  }
</script>

当我检查 $v.fullName , 该值正好等于 true .当我查看整个 $v对象，我看到 $anyDirty: false .
Codesandbox

Answer 1

验证配置格式错误
验证配置应该是:

export default {
  /**
   * Validation Config Format:
   *
   *   validations: {
   *     PROP_NAME: {
   *       RULE_NAME: RULE
   *     }
   *   }
   */
  validations: {
    //fullName: minLength(4), // DON'T DO THIS

    fullName: {
      minLength: minLength(4)
    }
  },
}

$touch你好像用过 this.$v.touch() , 但它应该是 this.$v.$touch() .然而，由于计算的 prop 只设置了一个 prop，你应该调用 $touch()在通过 Vuex 操作更改 Prop 后，在该 Prop (即 $v.PROP_NAME.$touch() )上。

export default {
  computed: {
    fullName: {
      get() {
        return this.$store.state.fullName;
      },
      set(name) {
        //this.$v.touch() // DON'T DO THIS

        this.$store.dispatch('updateFullName', name)
        this.$v.fullName.$touch()
      }
    }
  }
}