Hvordan gjenbruke logikk i Vue.js med kompositabler

Ved programmering er det viktig å strukturere kodebasen slik at du gjenbruker kode der det er mulig. Duplisering av kode kan blåse opp kodebasen og komplisere feilsøking, spesielt i større apper.

Vue forenkler gjenbruk av kode gjennom kompositabler. Composables er funksjoner som innkapsler logikk, og du kan gjenbruke dem på tvers av prosjektet for å håndtere lignende funksjonalitet.

Var det alltid komponerbare?

Før Vue 3 introduserte composables, kunne du bruke mixins til å fange kode og gjenbruke den i forskjellige deler av applikasjonen din. Mixins inneholdt Vue.js-alternativer som data, metoder og livssykluskroker, som muliggjorde gjenbruk av kode på tvers av flere komponenter.

For å lage mixins, strukturerer du dem i separate filer og bruker dem deretter på komponenter ved å legge til mixin til mixins-egenskapen i komponentens options-objekt. For eksempel:

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

Denne kodebiten viser innholdet i en blanding for validering av skjemaer. Denne blandingen inneholder to dataegenskaper – formData og formErrors – som opprinnelig er satt til tomme verdier.

formData lagrer inndata for skjemaet, inkludert brukernavn- og passordfelt initialisert som tomme. formErrors speiler denne strukturen for å holde potensielle feilmeldinger, også i utgangspunktet tomme.

Blandingen inneholder også en metode, validateForm(), for å sjekke at brukernavn- og passordfeltene ikke er tomme. Hvis et av feltene er tomt, fyller det formErrors-dataegenskapen med en passende feilmelding.

Metoden returnerer true for et gyldig skjema når formErrors er tom. Du kan bruke mixin ved å importere den til Vue-komponenten din og legge den til mixin-egenskapen til Options-objektet:

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

Dette eksemplet viser en Vue-komponent skrevet ved hjelp av Options-objekttilnærmingen. Mixins-egenskapen inkluderer alle mixinene du har importert. I dette tilfellet bruker komponenten validateForm-metoden fra formValidation-blandingen for å informere brukeren om skjemainnsendingen var vellykket.

Hvordan bruke kompositabler

En composable er en selvstendig JavaScript-fil med funksjoner som er skreddersydd for spesifikke bekymringer eller krav. Du kan utnytte Vues komposisjons-API i en komponerbar, ved å bruke funksjoner som refs og beregnede refs.

Denne tilgangen til komposisjons-APIet lar deg lage funksjoner som integreres i ulike komponenter. Disse funksjonene returnerer et objekt, som du enkelt kan importere og integrere i Vue-komponenter gjennom oppsettfunksjonen til Composition API.

Opprett en ny JavaScript-fil i prosjektets src-katalog for å bruke en komponerbar. For større prosjekter bør du vurdere å organisere en mappe i src og lage separate JavaScript-filer for forskjellige kompositabler, for å sikre at navnet til hver komponibel gjenspeiler formålet.

Inne i JavaScript-filen, definer funksjonen du trenger. Her er en restrukturering av formValidation-blandingen som en komponerbar:

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

Dette utdraget begynner med å importere den reaktive funksjonen fra vue-pakken. Den lager deretter en eksporterbar funksjon, useFormValidation().

Det fortsetter ved å lage en reaktiv variabel, tilstand, som inneholder formData- og formErrors-egenskapene. Kodebiten håndterer deretter skjemavalideringen med en veldig lik tilnærming til mixin. Til slutt returnerer den tilstandsvariabelen og validateForm-funksjonen som et objekt.

Du kan bruke denne komponerbare ved å importere JavaScript-funksjonen fra filen i komponenten din:

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

Etter å ha importert useFormValidation composable, destrukturerer denne koden JavaScript-objektet den returnerer og fortsetter med skjemavalideringen. Den varsler om det innsendte skjemaet er vellykket eller har feil.

Composables er de nye mixinene

Mens mixins var nyttige i Vue 2 for gjenbruk av kode, har composables erstattet dem i Vue 3. Composables gir en mer strukturert og vedlikeholdbar tilnærming til gjenbruk av logikk i Vue.js-applikasjoner, noe som gjør det enklere å bygge skalerbare nettapper med Vue.