Jak ponownie wykorzystać logikę w Vue.js za pomocą Composables

Podczas programowania ważne jest, aby ustrukturyzować bazę kodu tak, aby w miarę możliwości ponownie wykorzystać kod. Powielanie kodu może rozdęć bazę kodu i skomplikować debugowanie, szczególnie w przypadku większych aplikacji.

Vue ułatwia ponowne wykorzystanie kodu za pomocą komponowalnych elementów. Elementy te są zasadniczo funkcjami, które obejmują określony zestaw logiki, umożliwiając w ten sposób ich płynną integrację z różnymi komponentami w ramach jednego projektu w celu rozwiązania porównywalnych funkcjonalności.

Czy zawsze były to elementy kompozytowe?

Przed wprowadzeniem composables w Vue 3, programiści wykorzystywali mixiny do wyodrębniania kodu wielokrotnego użytku i stosowania go w swoich aplikacjach. Miksy te obejmowały szereg konfiguracji Vue.js, w tym właściwości danych, metodologie i cykle życia komponentów, ułatwiając szerokie współdzielenie kodu między różnymi elementami.

Aby zaimplementować mixiny, zazwyczaj organizuje się je w osobnych plikach i włącza do komponentów, włączając je jako część właściwości “mixins” komponentu w powiązanych z nim ustawieniach opcji. Jako ilustrację rozważmy następujący fragment kodu:

 // formValidation.js
export const formValidationMixin = {
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
      formErrors: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    validateForm() {
      this.formErrors = {};
  
      if (!this.formData.username.trim()) {
        this.formErrors.username = 'Username is required.';
      }
  
      if (!this.formData.password.trim()) {
        this.formErrors.password = 'Password is required.';
      }
   
      return Object.keys(this.formErrors).length === 0;
    },
  },
};

Ten fragment kodu przedstawia składniki mixina, który jest wykorzystywany do weryfikacji formularzy. Wspomniany mixin zawiera dwa atrybuty danych - formData i formErrors - którym początkowo przypisywane są wartości null lub void.

Mechanizm przechowywania znany jako formData jest odpowiedzialny za zachowanie informacji przesłanych za pośrednictwem formularza internetowego, który zawiera puste pola przeznaczone na nazwy użytkownika i hasła. Podobnie zmienna formErrors została utworzona z identyczną strukturą, aby pomieścić wszelkie możliwe komunikaty o błędach, które mogą się pojawić, przy czym obie są inicjowane jako pozbawione treści na początku.

Mixin zawiera metodę znaną jako validateForm() , która służy do sprawdzenia, czy pola wprowadzania nazwy użytkownika i hasła zostały wypełnione, czy nie. W przypadku, gdy jedno z tych pól jest puste, funkcja wypełni atrybut formErrors odpowiednim powiadomieniem o błędzie.

Implementacja zapewnia, że metoda zwraca wartość logiczną true, gdy w strukturze danych formErrors nie występują żadne błędy. Aby wykorzystać tę funkcjonalność w komponencie Vue.js, można zaimportować odpowiedni moduł zawierający funkcję reactiveMixin i włączyć go jako część właściwości mixin obiektu Options. Taka integracja pozwala komponentowi wykorzystać korzyści zapewniane przez funkcję reactiveMixin, która obejmuje automatyczne wykrywanie błędów i synchronizację z komponentami nadrzędnymi po zmianie wartości wejściowych.

 <template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="formData.username" />
        <span class="error">{{ formErrors.username }}</span>
      </div>

      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="formData.password" />
        <span class="error">{{ formErrors.password }}</span>
      </div>

      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import { formValidation } from "./formValidation.js";

export default {
  mixins: [formValidation],
  methods: {
    submitForm() {
      if (this.validateForm()) {
        alert("Form submitted successfully!");
      } else {
        alert("Please correct the errors in the form.");
      }
    },
  },
};
</script>

<style>
.error {
  color: red;
}
</style>

W tym przypadku obserwujemy komponent Vue, który wykorzystuje strategię obiektu Options. Mieszanka właściwości obejmuje każdy mixin, który został zaimportowany do wykorzystania w ramach danej konstrukcji. W szczególności komponent korzysta z funkcji validateForm pochodzącej z mixinu formValidation, aby poinformować użytkownika końcowego o wyniku przesłania formularza, a mianowicie, czy został on wykonany pomyślnie, czy nie.

Jak korzystać z komponentów

Komponent to samodzielny moduł JavaScript, który obejmuje niestandardową funkcjonalność dostosowaną do konkretnych potrzeb lub celów. Pozwala na wykorzystanie możliwości interfejsu API kompozycji Vue w jego ramach poprzez wykorzystanie zasobów, takich jak zmienne reaktywne i wartości obliczane.

Wykorzystanie tego punktu dostępu pozwala na tworzenie funkcji, które płynnie łączą się z wieloma elementami. Wspomniane funkcje generują encję, którą można bez wysiłku zaimportować i zasymilować w komponentach Vue za pośrednictwem etapu konfiguracji zapewnianego przez interfejs API kompozycji.

Aby wykorzystać element komponowalny w projekcie, konieczne jest utworzenie nowego pliku JavaScript w katalogu “src” projektu. W przypadkach, gdy projekt wymaga organizacji na bardziej szczegółowym poziomie, można zdecydować się na utworzenie podfolderu w katalogu “src” i wyznaczyć indywidualne pliki JavaScript dla różnych elementów kompozytowych. Istotne jest, aby nazwa każdego pliku composable dokładnie odzwierciedlała jego zamierzoną funkcję lub cel.

Aby utworzyć komponent wielokrotnego użytku i modułowy do sprawdzania poprawności formularzy w JavaScript, konieczne jest najpierw zdefiniowanie funkcji w pliku skryptu, która zawiera całą odpowiednią logikę i funkcjonalność. Restrukturyzując FormValidation mixin w ten sposób, możemy osiągnąć większą elastyczność i łatwość użycia podczas wdrażania walidacji formularzy w wielu projektach lub aplikacjach.

 // formValidation.js
import { reactive } from 'vue';

export function useFormValidation() {
  const state = reactive({
    formData: {
      username: '',
      password: '',
    },
    formErrors: {
      username: '',
      password: '',
    },
  });

  function validateForm() {
    state.formErrors = {};

    if (!state.formData.username.trim()) {
      state.formErrors.username = 'Username is required.';
    }

    if (!state.formData.password.trim()) {
      state.formErrors.password = 'Password is required.';
    }

    return Object.keys(state.formErrors).length === 0;
  }

  return {
    state,
    validateForm,
  };
}

Podany fragment kodu importuje funkcję reaktywną z pakietu Vue, a następnie tworzy eksporter o nazwie useFormValidation() , który służy do zarządzania walidacją formularzy w aplikacji.

Kod jest kontynuowany poprzez zdefiniowanie zmiennej reaktywnej o nazwie state , która przechowuje właściwości formData i formErrors w swoim zakresie. Pozwala to na wygodny dostęp do tych wartości zarówno podczas przesyłania, jak i inicjalizacji formularza. Następnie snippet stosuje bardzo podobną metodologię do tej, którą wykazał wcześniej wspomniany mixin w celu zarządzania procesem walidacji formularza.Ostatecznie wynikiem jest dostarczenie zmiennej state i funkcji validateForm jako połączonej całości.

Włączenie funkcji JavaScript z określonego pliku do komponentu można osiągnąć poprzez proces importowania w odpowiednim pliku.

 <template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="state.formData.username" />
        <span class="error">{{ state.formErrors.username }}</span>
      </div>

      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="state.formData.password" />
        <span class="error">{{ state.formErrors.password }}</span>
      </div>

      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script setup>
import { useFormValidation } from "./formValidation.js";
import { ref } from "vue";
const { state, validateForm } = useFormValidation();

const submitForm = () => {
  if (validateForm()) {
    alert("Form submitted successfully!");
  } else {
    alert("Please correct the errors in the form.");
  }
};
</script>

<style>
.error {
  color: red;
}
</style>

Po wprowadzeniu komponentu funkcjonalnego useFormValidation , niniejsza implementacja przechodzi do dekonstrukcji obiektu JavaScript, który został zaimportowany wraz ze wspomnianym komponentem. Proces ten umożliwia kontynuację procedur sprawdzania poprawności formularzy w aplikacji. Następnie program dołącza alert z wyszczególnieniem wyniku pomyślnego przesłania lub wszelkich powszechnych błędów wykrytych podczas fazy oceny.

Composables Are the New Mixins

Vue Composables stanowią ulepszenie w stosunku do Mixins, ponieważ oferują bardziej zorganizowaną i zrównoważoną metodę recyklingu funkcjonalności w projektach Vue.js. Pozwala to programistom na tworzenie większych aplikacji internetowych bez wysiłku, wykorzystując zalety Vue.