Hur man återanvänder logik i Vue.js med Composables

När du programmerar är det viktigt att strukturera din kodbas så att du återanvänder kod där det är möjligt. Duplicering av kod kan göra kodbasen tjockare och försvåra felsökning, särskilt i större appar.

Vue underlättar återanvändningen av kod med hjälp av komponerbara element. Dessa element är i huvudsak funktioner som omfattar en specifik uppsättning logik, vilket möjliggör sömlös integrering av dem i olika komponenter inom ett enda projekt för att hantera jämförbara funktioner.

Var det alltid Composables?

Innan composables introducerades i Vue 3 använde utvecklare mixins för att extrahera återanvändbar kod och använda den i sina applikationer. Dessa mixins bestod av en rad olika Vue.js-konfigurationer, inklusive dataegenskaper, metoder och komponentlivscykler, vilket underlättade omfattande koddelning mellan olika element.

För att implementera mixins organiserar man dem vanligtvis i enskilda filer och införlivar dem i komponenter genom att inkludera dem som en del av komponentens “mixins”-egenskap inom dess tillhörande alternativinställningar. Som en illustration kan du titta på följande kodavsnitt:

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

Detta kodsegment visar beståndsdelarna i en mixin som används för att verifiera formulär. Blandningen består av två dataattribut - formData och formErrors - som initialt tilldelas null- eller void-värden.

Lagringsmekanismen som kallas formData ansvarar för att bevara information som skickas in via ett webbformulär, som innehåller tomma fält avsedda för användarnamn och lösenord. På samma sätt har variabeln formErrors skapats med en identisk struktur för att rymma eventuella felmeddelanden som kan uppstå, och båda initialiseras som innehållslösa från början.

Mixinen innehåller en metod som kallas validateForm() , som används för att verifiera om inmatningsfälten för användarnamn och lösenord har fyllts i eller inte. Om något av dessa fält råkar vara tomt kommer funktionen att fylla i formErrors attributet med ett lämpligt felmeddelande.

Implementeringen säkerställer att metoden ger ett booleskt värde på true när inga fel finns i formErrors-datastrukturen. För att använda denna funktionalitet i en Vue.js-komponent kan man importera den relevanta modulen som innehåller reactiveMixin-funktionen och införliva den som en del av Options-objektets mixin-egenskap. Denna integration gör att komponenten kan utnyttja fördelarna med reactiveMixin-funktionen, vilket inkluderar automatisk feldetektering och synkronisering med överordnade komponenter vid ändringar i ingångsvärden.

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

I det här fallet ser vi en Vue-komponent som använder objektstrategin Options. Blandningen av egenskaper omfattar varje mixin som har importerats för användning inom den givna konstruktionen. Specifikt använder komponenten sig av validateForm-funktionen som härrör från formValidation mixin, för att upplysa slutanvändaren om resultatet av deras formulärinlämning; nämligen om det utfördes framgångsrikt eller inte.

Hur man använder Composables

En composable är en fristående JavaScript-modul som innehåller anpassade funktioner för särskilda behov eller mål. Den gör det möjligt att utnyttja kapaciteten hos Vues Composition API inom dess gränser genom att använda resurser som reaktiva variabler och beräknade värden.

Användningen av denna åtkomstpunkt ger tillstånd för utveckling av funktioner som sömlöst samverkar med en mängd olika element. Dessa funktioner genererar en enhet som enkelt kan importeras och assimileras i Vue-komponenter via konfigurationssteget som tillhandahålls av Composition API.

För att kunna använda ett komponerbart element i ditt projekt är det nödvändigt att skapa en ny JavaScript-fil i “src”-katalogen i ditt projekt. Om projektet kräver en mer detaljerad organisation kan man välja att skapa en undermapp i “src”-katalogen och ange enskilda JavaScript-filer för olika komponerbara element. Det är viktigt att filnamnet för varje composable korrekt representerar dess avsedda funktion eller syfte.

För att skapa en återanvändbar och modulär komponent för formulärvalidering i JavaScript, är det nödvändigt att först definiera en funktion i skriptfilen som kapslar in all relevant logik och funktionalitet. Genom att omstrukturera mixinen FormValidation på detta sätt kan vi uppnå större flexibilitet och användarvänlighet när vi implementerar formulärvalidering i flera projekt eller applikationer.

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

Det givna kodavsnittet importerar en reaktiv funktion från Vue-paketet och utvecklar därefter en exportör med namnet useFormValidation() , som används för att hantera formulärvalidering inom applikationen.

Koden fortsätter med att definiera en reaktiv variabel med namnet state , som lagrar egenskaperna formData och formErrors inom sitt scope. Detta gör det enkelt att komma åt dessa värden under både inlämning och initialisering av formuläret. Därefter använder kodavsnittet en metod som liknar den som används av den tidigare nämnda mixinen för att hantera formulärets valideringsprocess.I slutändan är resultatet att variabeln state och funktionen validateForm tillhandahålls som en kombinerad enhet.

Inkorporering av JavaScript-funktionen från den angivna filen i din komponent kan uppnås genom importprocessen i den relevanta filen.

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

Efter införandet av den funktionella komponenten useFormValidation , fortsätter den nuvarande implementeringen med att dekonstruera ett JavaScript-objekt som importerades tillsammans med nämnda komponent. Denna process gör det möjligt att fortsätta med formulärvalideringsprocedurer inom applikationen. Programmet lägger därefter till en varning som beskriver resultatet av antingen framgångsrik inlämning eller eventuella fel som upptäckts under utvärderingsfasen.

Composables är de nya Mixins

Vue Composables är en förbättring jämfört med Mixins eftersom de erbjuder en mer organiserad och hållbar metod för att återvinna funktionalitet inom Vue.js-projekt. Detta gör det möjligt för utvecklare att enkelt skapa större webbapplikationer genom att utnyttja fördelarna med Vue.