Vue 3에서 Vuelidate Alpha로 재생

Vuelidate는 Vue 3 출시에 맞춰 프로젝트를 재작업하고 있습니다. Alpha에만 있지만 접근 방식이 마음에 들어 작업 중인 마이크로 서비스 데모에 통합했습니다.

이를 고려하여 Vuelidate가 현재 Composition API와 어떻게 작동하는지에 대해 이야기해야겠다고 생각했습니다. 아직 개발 초기 단계이지만 접근 방식이 마음에 듭니다.

이 예에서는 내 마이크로 서비스 프로젝트(진행 중인 작업)의 결제 보기를 가리킵니다.

Checkout.vue

설정해 봅시다. 먼저 패키지를 설치해야 합니다. 새로운 Vuelidate는 핵심 패키지와 유효성 검사기 패키지를 분리하도록 업데이트되었으므로 다음 두 가지가 모두 필요합니다.

> npm i @vuelidate/core @vuelidate/validators --save

해당 버전을 사용하는 경우 Vue 2 및 Composition API에서도 작동합니다.

이를 설치하면 여전히 플러그인으로 설치할 수 있지만 Composition API와 같이 실제로 필요한지 확실하지 않습니다. 단지 구성 가능합니다. 하지만 그럴 경우에는 다음과 같이 하십시오.

// Vue 3
//...
import { VuelidatePlugin } from "@vuelidate/core";

const app = createApp(App);

app.use(store)
   .use(router)
   .use(VuelidatePlugin)
   .mount('#app');

그러나 진정한 마법은 구성 요소 자체에서 작동합니다. 먼저 유효성 검사를 제공하려는 인터페이스를 살펴보겠습니다.

export default interface Payment {
  creditCard: string;
  expirationMonth: number;
  expirationYear: number;
  postalCode: string;
  validationCode: string;
}

결제를 확인하는 데 필요한 몇 가지 사항이 있습니다. 이렇게 하려면 규칙 세트를 만들면 됩니다(Vue에서 직접 수행하지만 필수는 아님).

setup(props, ctx) {
  const payment = reactive({} as Payment);

  const rules = {
    creditCard: { required, creditcard },
    expirationMonth: { required, numeric, length: length(2) },
    expirationYear: { required, numeric, length: length(2) },
    postalCode: { required, minLength: minLength(5) },
    validationCode: { required, numeric },
  };

  //..
},

규칙은 각 속성에 할당된 유효성 검사기가 있는 개체일 뿐입니다. 유효성 검사(필수, 숫자 및 minLength)는 Vuelidate에서 제공하는 표준 유효성 검사기입니다.

import { required, numeric, minLength } from "@vuelidate/validators";

신용 카드 및 길이 유효성 검사 규칙은 내가 작성한 사용자 지정 규칙입니다. 아래에서 어떻게 작동하는지 설명하겠습니다. 그러나 먼저 이러한 규칙을 검증으로 바꾸는 마술을 해봅시다.

먼저 useVuelidate라는 Vuelidate의 함수를 사용하여 규칙을 개체와 병합하여 유효성을 검사합니다.

import { useVuelidate } from "@vuelidate/core";

규칙과 개체를 사용하여 호출하면 됩니다.

const model = useVuelidate(rules, payment);

그런 다음 이 모델 객체를 Vue로 반환할 수 있습니다.

    return {
      model
    };

기본 개체에 직접 바인딩하는 대신 유효성 검사 모델에 바인딩합니다.

<div class="form-group">
  <label>Credit Card:</label>
  <input class="form-control" 
          v-model="model.creditCard.$model" />
</div>

(속성 끝에 있는 모델은 우리가 실제로 양방향 바인딩하는 데이터이기 때문에 중요합니다. 더 이상 옵션 API에 있지 않기 때문에 Vuelidate가 이러한 이름에서 ")"를 제거할 수 있을 것으로 예상합니다. 따라서 매직 이름이 필요하지 않습니다.

모델 개체 자체에는 최상위 오류 정보가 포함되어 있으므로 유효할 때까지 비활성화 버튼과 같은 작업을 수행할 수 있습니다.

<button
  class="btn btn-success"
  :disabled="model.$invalid"
  @click="processPayment()"
>

각 속성에 대해 $invalid 및 오류 컬렉션이 포함됩니다. 나를 위해 나는 오류를 표시하기 위해 이것을 작은 구성 요소로 감쌌습니다.

<error-span :property="model.creditCard" />

다음에 대한 잠재적 유효성 검사 오류를 표시하기 위해 속성을 전달합니다.

<span v-if="property.$invalid" class="text-danger">
  <slot>
    <ul class="list-unstyled">
      <li v-for="e in property.$errors" :key="e.$message">
        {{ e.$message }}
      </li>
    </ul>
  </slot>
</span>

기본적으로 오류는 즉시 확인되지 않습니다. 모델을 수동으로 터치할 수 있지만 양식 제출을 확인하기로 결정했습니다.

async function processPayment(): Promise<void> {
  if (await model.value.$validate()) {
    // ...
  }
}

이것이 실패하면 유효성 검사 오류가 채워집니다. 나는 이것을 좋아한다. 한 가지 더, 사용자 지정 유효성 검사입니다. 앞서 내가 하고 있는 일에 맞는 몇 가지 유효성 검사를 작성했다고 언급했습니다. 예를 들어 정규식을 사용하여 작성한 미국 전화번호 확인을 살펴보겠습니다.

export const phone = {
  $validator: value => {
    if (typeof value === 'undefined' || value === null || value === '') {
      return true
    }
    return /^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})$/.test(value)
  },
  $message: "Must be a valid phone number."
};

유효성 검사기와 표시할 메시지가 있는 개체일 뿐입니다. 유효성 검사기는 값을 가져와 정규식에 대해 테스트하는 화살표 함수일 뿐입니다. 매개 변수를 사용하는 유효성 검사기를 가질 수도 있습니다.

export const length = (length) => ({
  $validator: value => {
    if (typeof value === 'undefined' || value === null || value === '') {
      return true
    }
    return value?.length === length;
  }, 
  $message: `Must be exactly ${length}characters long`
});

$validator와 $message 모두에서 사용할 수 있도록 매개 변수가 개체에 전달되는 방법에 유의하십시오.

출시로 이동하면서 깨질 것이 확실하지만 성숙함에 따라 새로운 접근 방식을 살펴볼 가치가 있다고 생각합니다. 어떻게 생각해?

      This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
      Based on a work at [wildermuth.com](http://wildermuth.com).

이 기사가 마음에 들면 Pluralsight에서 Shawn의 과정을 참조하십시오.