Logica hergebruiken in Vue.js met composables

Bij het programmeren is het belangrijk om je codebase zo te structureren dat je code waar mogelijk hergebruikt. Het dupliceren van code kan de codebase opblazen en het debuggen bemoeilijken, vooral bij grotere apps.

Vue vergemakkelijkt het hergebruik van code door middel van samenstelbare elementen. Deze elementen zijn in wezen functies die een specifieke set logica omvatten, waardoor ze naadloos kunnen worden geïntegreerd in verschillende componenten binnen één project om vergelijkbare functionaliteiten aan te pakken.

Was het altijd al composables?

Vóór de introductie van composables in Vue 3 gebruikten ontwikkelaars mixins om herbruikbare code te extraheren en toe te passen in hun applicaties. Deze mixins bestonden uit een reeks configuraties van Vue.js, waaronder data-eigenschappen, methodologieën en levenscycli van componenten, wat het delen van code tussen verschillende elementen vergemakkelijkte.

Om mixins te implementeren, organiseert men ze meestal in individuele bestanden en neemt ze op in componenten door ze op te nemen als onderdeel van de eigenschap “mixins” van de component in de bijbehorende optie-instellingen. Ter illustratie het volgende codefragment:

 // 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;
    },
  },
};

Dit code segment toont de onderdelen van een mixin die wordt gebruikt voor het controleren van formulieren. Deze mixin bestaat uit twee gegevensattributen - formData en formErrors - die in eerste instantie nul of ongeldige waarden krijgen toegewezen.

Het opslagmechanisme dat bekend staat als formData is verantwoordelijk voor het bewaren van informatie die via een webformulier wordt verzonden, waaronder lege velden voor gebruikersnamen en wachtwoorden. Op dezelfde manier is de variabele formErrors gemaakt met een identieke structuur om ruimte te bieden aan mogelijke foutmeldingen die kunnen optreden, waarbij beide geïnitialiseerd zijn als zijnde inhoudsloos aan het begin.

De mixin bevat een methode die bekend staat als validateForm() , die dient om te controleren of de invoervelden voor gebruikersnaam en wachtwoord al dan niet zijn ingevuld. Als een van deze velden leeg blijkt te zijn, vult de functie het formErrors attribuut met een toepasselijke foutmelding.

De implementatie zorgt ervoor dat de methode een Booleaanse waarde van true oplevert als er geen fouten aanwezig zijn in de formErrors datastructuur. Om deze functionaliteit te gebruiken in een Vue.js component, kan de relevante module met de reactiveMixin functie worden geïmporteerd en opgenomen als onderdeel van de mixin eigenschap van het Options object. Door deze integratie kan het component gebruik maken van de voordelen die de reactiveMixin functie biedt, waaronder automatische foutdetectie en synchronisatie met bovenliggende componenten bij wijzigingen in invoerwaarden.

 <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>

In dit voorbeeld zien we een Vue-component dat de Options-objectstrategie gebruikt. De mix van eigenschappen omvat elke mixin die is geïmporteerd voor gebruik binnen het gegeven construct. Specifiek maakt het component gebruik van de validateForm functie die is afgeleid van de formValidation mixin, om de eindgebruiker te informeren over het resultaat van het indienen van het formulier; namelijk of het succesvol is uitgevoerd of niet.

Hoe Composables te gebruiken

Een composable is een zelfstandige JavaScript-module die aangepaste functionaliteit bevat voor bepaalde behoeften of doelstellingen. Het maakt het mogelijk om de mogelijkheden van Vue’s Composition API binnen zijn grenzen te benutten door gebruik te maken van bronnen zoals reactieve variabelen en berekende waarden.

Het gebruik van dit toegangspunt geeft toestemming voor de ontwikkeling van functies die naadloos aansluiten op een veelheid aan elementen. Deze functies genereren een entiteit die moeiteloos kan worden geïmporteerd en geassimileerd binnen Vue-componenten via de configuratiefase die wordt geboden door de Composition API.

Om een componeerbaar element in je project te gebruiken, is het nodig om een nieuw JavaScript-bestand aan te maken in de “src” map van je project. In gevallen waar het project organisatie vereist op een meer granulair niveau, kan ervoor gekozen worden om een submap aan te maken binnen de “src” map en individuele JavaScript bestanden aan te wijzen voor verschillende samenstelbare elementen. Het is essentieel dat de bestandsnaam van elke composable nauwkeurig de bedoelde functie of het doel weergeeft.

Om een herbruikbare en modulaire component voor formuliervalidatie in JavaScript te maken, is het nodig om eerst een functie te definiëren binnen het scriptbestand die alle relevante logica en functionaliteit insluit. Door de mixin FormValidation op deze manier te herstructureren, kunnen we meer flexibiliteit en gebruiksgemak bereiken bij het implementeren van formuliervalidatie in meerdere projecten of toepassingen.

 // 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,
  };
}

Het gegeven codefragment importeert een reactieve functie uit het Vue-pakket en ontwikkelt vervolgens een exporter, genaamd useFormValidation() , die dient om de formuliervalidatie binnen de applicatie te beheren.

De code gaat verder met het definiëren van een reactieve variabele met de naam state , die de eigenschappen formData en formErrors binnen zijn bereik opslaat. Dit zorgt voor gemakkelijke toegang tot deze waarden tijdens zowel het indienen als het initialiseren van het formulier. Vervolgens past het knipsel een methodologie toe die sterk lijkt op die van de eerder genoemde mixin om het validatieproces van het formulier te beheren.Uiteindelijk is het resultaat het aanbieden van de state variabele en de validateForm functie als een gecombineerde entiteit.

Je kunt de JavaScript-functie uit het opgegeven bestand opnemen in je component via het importeerproces in het betreffende bestand.

 <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>

Na de introductie van de useFormValidation functionele component, gaat de huidige implementatie verder met het deconstrueren van een JavaScript-object dat samen met deze component werd geïmporteerd. Dit proces maakt de voortzetting van formuliervalidatieprocedures binnen de toepassing mogelijk. Het programma voegt vervolgens een waarschuwing toe met het resultaat van ofwel een geslaagde indiening of eventuele fouten die tijdens de evaluatiefase zijn gedetecteerd.

Composables zijn de nieuwe mixins

Vue Composables zijn een verbetering ten opzichte van Mixins omdat ze een meer georganiseerde en duurzame methode bieden voor het recyclen van functionaliteit binnen Vue.js projecten. Hierdoor kunnen ontwikkelaars moeiteloos grootschaligere webapplicaties maken door gebruik te maken van de voordelen die Vue biedt.