Правильный способ использования Vuex с Vuelidation - PullRequest
Новая
       46

Правильный способ использования Vuex с Vuelidation

2 голосов
/ 01 августа 2020

Я работаю над интерфейсом Vue для приложения, которое требует, чтобы все данные формы сохранялись локально перед отправкой на сервер, если проблема с сетевым подключением вызывает прерывание обслуживания. Я использую Vuex для поддержки всех данных формы в приложении, чтобы их можно было сохранять и восстанавливать в / из локального хранилища по мере необходимости.

Второе требование - проверка формы, для которой я собираюсь использовать библиотека 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.

Codesandbox

1 Ответ

2 голосов
/ 02 августа 2020

Конфигурация проверки сформирована неверно

Конфигурация проверки должна быть: 

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()) после опора изменяется с помощью действия 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()
      }
    }
  }
}

Редактировать с помощью Vuelidate с Vuex

...