U programiranju, od ključnog je značaja da se kod organizuje na način koji omogućava njegovu ponovnu upotrebu kad god je to moguće. Dupliranje koda može dovesti do nepotrebnog povećanja veličine koda i komplikovati proces pronalaženja i ispravljanja grešaka, naročito u složenijim aplikacijama.
Vue.js olakšava ponovnu upotrebu koda zahvaljujući takozvanim „composable“ funkcijama. Composables su funkcije koje enkapsuliraju određenu logiku i mogu se primeniti u različitim delovima projekta za upravljanje sličnim funkcionalnostima.
Da li su composables uvek postojali?
Pre nego što je Vue 3 uveo composable komponente, koristili su se mixini kao sredstvo za ponovnu upotrebu koda u različitim delovima aplikacije. Mixini su sadržali Vue.js opcije kao što su podaci, metode i hook-ovi životnog ciklusa, omogućavajući tako ponovnu upotrebu koda kroz više komponenti.
Za kreiranje mixina, oni su se organizovali u posebne datoteke i zatim primenjivali na komponente dodavanjem mixina svojstvu „mixins“ unutar objekta opcija komponente. Na primer:
export const formValidationMixin = {
data() {
return {
formData: {
username: '',
password: '',
},
formErrors: {
username: '',
password: '',
},
};
},
methods: {
validateForm() {
this.formErrors = {};
if (!this.formData.username.trim()) {
this.formErrors.username="Korisničko ime je obavezno.";
}
if (!this.formData.password.trim()) {
this.formErrors.password = 'Lozinka je obavezna.';
}
return Object.keys(this.formErrors).length === 0;
},
},
};
Ovaj isječak koda ilustruje mixin za validaciju formi. Ovaj mixin sadrži dva svojstva podataka — `formData` i `formErrors` — inicijalno postavljena na prazne vrednosti.
`formData` služi za čuvanje unetih podataka iz forme, uključujući polja za korisničko ime i lozinku, koja su inicijalizovana kao prazna. `formErrors` prati ovu strukturu kako bi se u njemu zadržale potencijalne poruke o greškama, takođe inicijalno prazne.
Mixin takođe sadrži metodu, `validateForm()`, koja proverava da li su polja za korisničko ime i lozinku popunjena. Ukoliko je bilo koje od polja prazno, `formErrors` svojstvo se popunjava odgovarajućom porukom o grešci.
Metoda vraća `true` ako je forma validna, odnosno ako je `formErrors` prazan. Mixin se može koristiti uvoženjem u Vue komponentu i dodavanjem svojstvu `mixins` u Options objektu:
<template>
<div>
<form @submit.prevent="submitForm">
<div>
<label for="username">Korisničko ime:</label>
<input type="text" id="username" v-model="formData.username" />
<span class="error">{{ formErrors.username }}</span>
</div>
<div>
<label for="password">Lozinka:</label>
<input type="password" id="password" v-model="formData.password" />
<span class="error">{{ formErrors.password }}</span>
</div>
<button type="submit">Potvrdi</button>
</form>
</div>
</template>
<script>
import { formValidation } from "./formValidation.js";
export default {
mixins: [formValidation],
methods: {
submitForm() {
if (this.validateForm()) {
alert("Forma je uspešno poslata!");
} else {
alert("Molimo vas, ispravite greške u formi.");
}
},
},
};
</script>
<style>
.error {
color: red;
}
</style>
Ovaj primer prikazuje Vue komponentu napisanu koristeći pristup Options objekta. Svojstvo `mixins` uključuje sve uvezene mixine. U ovom slučaju, komponenta koristi metodu `validateForm` iz `formValidation` mixina kako bi obavestila korisnika da li je slanje forme uspešno.
Kako koristiti Composables
Composable je samostalna JavaScript datoteka koja sadrži funkcije prilagođene specifičnim problemima ili zahtevima. Možete koristiti Vue-ov API za kompoziciju unutar composable funkcije, koristeći funkcije poput `refs` i `computed refs`.
Ovaj pristup API-ju za kompoziciju omogućava kreiranje funkcija koje se mogu integrisati u različite komponente. Te funkcije vraćaju objekat koji se lako može uvesti i koristiti u Vue komponentama kroz funkciju `setup` Composition API-ja.
Za upotrebu composable funkcije, kreirajte novu JavaScript datoteku u `src` direktorijumu vašeg projekta. Za veće projekte, razmislite o organizaciji fascikle unutar `src` i kreiranju zasebnih JavaScript datoteka za različite composable funkcije, osiguravajući da naziv svake funkcije odražava njenu namenu.
Unutar JavaScript datoteke, definišite funkciju koja vam je potrebna. Evo restrukturiranja `formValidation` mixina kao composable funkcije:
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="Korisničko ime je obavezno.";
}
if (!state.formData.password.trim()) {
state.formErrors.password = 'Lozinka je obavezna.';
}
return Object.keys(state.formErrors).length === 0;
}
return {
state,
validateForm,
};
}
Ovaj isječak započinje uvozom `reactive` funkcije iz `vue` paketa. Zatim se kreira funkcija za izvoz, `useFormValidation()`.
Nakon toga se kreira reaktivna promenljiva, `state`, koja sadrži svojstva `formData` i `formErrors`. Isječak nastavlja sa procesom validacije forme, slično pristupu kod mixina. Na kraju, vraća promenljivu `state` i funkciju `validateForm` kao objekat.
Composable funkciju možete koristiti uvoženjem JavaScript funkcije iz datoteke u vašoj komponenti:
<template>
<div>
<form @submit.prevent="submitForm">
<div>
<label for="username">Korisničko ime:</label>
<input type="text" id="username" v-model="state.formData.username" />
<span class="error">{{ state.formErrors.username }}</span>
</div>
<div>
<label for="password">Lozinka:</label>
<input type="password" id="password" v-model="state.formData.password" />
<span class="error">{{ state.formErrors.password }}</span>
</div>
<button type="submit">Potvrdi</button>
</form>
</div>
</template>
<script setup>
import { useFormValidation } from "./formValidation.js";
import { ref } from "vue";
const { state, validateForm } = useFormValidation();
const submitForm = () => {
if (validateForm()) {
alert("Forma je uspešno poslata!");
} else {
alert("Molimo vas, ispravite greške u formi.");
}
};
</script>
<style>
.error {
color: red;
}
</style>
Nakon uvoza `useFormValidation` composable funkcije, ovaj kod dekonstruiše JavaScript objekat koji vraća i nastavlja sa validacijom forme. Prikazuje poruku upozorenja u zavisnosti od toga da li je slanje forme uspelo ili je bilo grešaka.
Composables su novi mixini
Iako su mixini bili korisni u Vue 2 za ponovnu upotrebu koda, composables su ih zamenili u Vue 3. Composables pružaju strukturiraniji i održiviji pristup za ponovnu upotrebu logike u Vue.js aplikacijama, što olakšava razvoj skalabilnih web aplikacija pomoću Vue-a.