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

Inom programmering är det av största vikt att organisera sin kod på ett sådant sätt att återanvändning av kod underlättas. Att duplicera kod kan leda till en okontrollerad tillväxt av kodbasen, vilket i sin tur försvårar felsökningen, särskilt i omfattande applikationer.

Vue.js erbjuder en elegant lösning för detta genom att använda sig av kompositioner. Dessa kompositer är i grunden funktioner som kapslar in logik. Tack vare dem kan man återanvända specifika funktionaliteter i hela projektet.

Fanns det alltid kompositioner?

Innan Vue 3 introducerade kompositioner, använde man mixins för att hantera återanvändningen av kod. Mixins tillhandahöll Vue.js-alternativ som data, metoder och livscykelkrokar, vilket gjorde det möjligt att dela kod mellan olika komponenter.

För att skapa en mixin, strukturerade man den i separata filer, för att sedan applicera den på komponenter genom att lägga till den i egenskapen ”mixins” inom komponentens options-objekt. Ett konkret exempel:

 
export const formValidationMixin = {
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
      formErrors: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    validateForm() {
      this.formErrors = {};

      if (!this.formData.username.trim()) {
        this.formErrors.username="Användarnamn krävs.";
      }

      if (!this.formData.password.trim()) {
        this.formErrors.password = 'Lösenord krävs.';
      }
  
      return Object.keys(this.formErrors).length === 0;
    },
  },
};

Denna kod demonstrerar en mixin för formulärvalidering. Denna mixin innehåller datavariablerna ”formData” och ”formErrors”, som initialt är tomma.

”formData” lagrar formulärets indata, som ”användarnamn” och ”lösenord” som båda är initialt tomma. ”formErrors” speglar denna struktur och används för att lagra felmeddelanden, även den är initialt tom.

Mixin inkluderar även en metod, ”validateForm()”, som kontrollerar om ”användarnamn” och ”lösenord” är ifyllda. Om ett av dessa fält är tomt fylls ”formErrors” med ett passande felmeddelande.

Metoden returnerar ”true” när formuläret är giltigt (d.v.s. ”formErrors” är tom). Man kan använda denna mixin genom att importera den till en Vue-komponent och inkludera den i ”mixins”-egenskapen i options-objektet:

 <template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">Användarnamn:</label>
        <input type="text" id="username" v-model="formData.username" />
        <span class="error">{{ formErrors.username }}</span>
      </div>
      <div>
        <label for="password">Lösenord:</label>
        <input type="password" id="password" v-model="formData.password" />
        <span class="error">{{ formErrors.password }}</span>
      </div>
      <button type="submit">Skicka</button>
    </form>
  </div>
</template>

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

export default {
  mixins: [formValidation],
  methods: {
    submitForm() {
      if (this.validateForm()) {
        alert("Formuläret har skickats!");
      } else {
        alert("Åtgärda felen i formuläret.");
      }
    },
  },
};
</script>

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

Detta exempel visar en Vue-komponent skriven med options-objektet. Egenskapen ”mixins” inkluderar alla mixins som importerats. Här använder komponenten metoden ”validateForm” från mixin ”formValidation” för att visa om formuläret har skickats eller inte.

Hur man använder kompositer

En komposit är en fristående JavaScript-fil som innehåller funktioner skapade för att lösa specifika problem eller behov. En sådan komposit kan använda Vues kompositions-API, med hjälp av funktioner som ”ref” och ”computed ref”.

Denna tillgång till kompositions-API:et möjliggör skapandet av funktioner som kan integreras i olika komponenter. Funktionerna returnerar ett objekt, vilket gör det enkelt att importera och använda dessa funktioner i Vue-komponenter via ”setup”-funktionen i kompositions-API:et.

För att använda en komposit skapar man en ny JavaScript-fil i projektets ”src”-katalog. I större projekt kan man organisera filerna genom att skapa en mapp inom ”src” och organisera kompositionerna i separata JavaScript-filer där varje fils namn speglar kompositionens syfte.

Inne i JavaScript-filen definierar man den funktion som behövs. Här är ett exempel på hur man strukturerar om ”formValidation”-mixin som en komposit:

 
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="Användarnamn krävs.";
    }

    if (!state.formData.password.trim()) {
      state.formErrors.password = 'Lösenord krävs.';
    }

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

  return {
    state,
    validateForm,
  };
}

Koden börjar med att importera funktionen ”reactive” från Vue-paketet. Sedan skapas en exporterbar funktion, ”useFormValidation()”.

Inuti denna funktion skapas en reaktiv variabel ”state” som innehåller egenskaperna ”formData” och ”formErrors”. Koden hanterar sedan formulärvalideringen, på ett liknande sätt som mixin. Slutligen returneras variabeln ”state” och funktionen ”validateForm” som ett objekt.

Denna komposit kan användas genom att importera JavaScript-funktionen från filen in i komponenten:

 <template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">Användarnamn:</label>
        <input type="text" id="username" v-model="state.formData.username" />
        <span class="error">{{ state.formErrors.username }}</span>
      </div>
      <div>
        <label for="password">Lösenord:</label>
        <input type="password" id="password" v-model="state.formData.password" />
        <span class="error">{{ state.formErrors.password }}</span>
      </div>
      <button type="submit">Skicka</button>
    </form>
  </div>
</template>

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

const submitForm = () => {
  if (validateForm()) {
    alert("Formuläret har skickats!");
  } else {
    alert("Åtgärda felen i formuläret.");
  }
};
</script>

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

Efter att ha importerat ”useFormValidation”-kompositen, dekonstruerar koden JavaScript-objektet som returneras och fortsätter med formulärvalideringen. Ett meddelande visas sedan som bekräftar om formuläret har skickats korrekt eller om det finns fel som behöver rättas.

Kompositer är de nya mixinerna

Mixin var användbart i Vue 2 för återanvändning av kod, men kompositer har tagit över i Vue 3. Kompositer erbjuder en mer strukturerad och hållbar metod för att återanvända logik i Vue.js-applikationer, vilket underlättar utvecklingen av skalbara webbapplikationer med Vue.