使用 Vuex 和 Vuelidation 的正确方法

Question

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

第二个要求是表单验证，为此我打算使用 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()。然而，由于计算的道具只设置一个道具，你应该只调用 $touch() 在那个道具上（即 $v.PROP_NAME.$touch()） after 通过 Vuex 更改道具动作。

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()
      }
    }
  }
}

使用 Vuex 和 Vuelidation 的正确方法

Proper way to use Vuex with Vuelidation

javascript

vue.js

vuex

vuejs2

vuelidate

验证配置格式错误

`$touch`