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

Question

我正在为一个应用程序开发 Vue 前端，该应用程序需要在提交到后端之前在本地保存所有表单数据，以防网络连接问题导致服务中断。我正在使用 Vuex 来维护整个应用程序中的所有表单数据，以便可以根据需要将其保存到本地存储或从本地存储中恢复。

第二个要求是表单验证，为此我打算使用 Vuelidate 库。文档建议使用不带 Vuelidate 的 Vuelidate v-model，只需要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.

密码沙盒

标签： javascriptvue.jsvuejs2vuexvuelidate

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，因此您应该在通过 Vuex 操作更改 prop之后$touch()调用该 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()
      }
    }
  }
}