Vue.js je progresivni JavaScript okvir koji se koristi za izgradnju korisničkih interfejsa. Uz svoju glavnu biblioteku za izgradnju moćnih i sofisticiranih aplikacija za jednu stranicu, Vue.js takođe nudi dodatne biblioteke kao što su vue-router, Vuex, Vue CLI i još mnogo toga. Jedna moćna biblioteka u ekosistemu Vue.js je Nuxt.js, koji je okvir napravljen za Vue.js koji omogućava bolju strukturu koda, renderovanje na strani servera, generisanje statičkog sajta, moćan sistem rutiranja i još mnogo toga. Implementacija prototipa u Vue koristeći Nuxt je značajan aspekt i to je ono što će ovaj članak detaljno istražiti.
Razumijevanje prototipova u JavaScript-u
U JavaScriptu, a prototip je objekt od kojeg drugi objekti nasljeđuju svojstva. Značajka prototipa JavaScripta omogućava da se metode i svojstva dijele među objektima, smanjujući korištenje memorije i čineći kod efikasnijim. Pogledajmo sada kako se prototipovi mogu koristiti unutar Vue i Nuxt razvojnog konteksta.
Integracija prototipova sa Vue i Nuxtom
Da bismo dodali prototip na Vue koristeći Nuxt, imamo dvije opcije. Možemo ga ili dodati u Vue instancu ili dodati prototip u Nuxtov globalni kontekst.
// Adding to Vue instance
Vue.prototype.$myPrototype = 'Prototype';
// Adding to Nuxt context
export default ({ app }, inject) => {
inject('myPrototype', 'Prototype');
}
Prva metoda, dodavanjem Vue instanci, omogućava da prototip bude vidljiv u kontekstu Vue komponente. Možete mu pristupiti unutar metoda, izračunatih svojstava, kukica životnog ciklusa, itd. koristeći this.$myPrototype. Druga metoda, koristeći Nuxt.js inject, uvodi prototip u kontekst Nuxt.js, Vue instancu i Vuex trgovinu. Dakle, osim što mu se pristupa kao this.$myPrototype unutar komponente, može mu se pristupiti i preko konteksta i skladišta. Kao context.$myPrototype i store.$myPrototype.
Implementacija korak po korak
Hajde da napišemo deo koda za višekratnu upotrebu dodavanjem svojstva prototipa Vue. Recimo da ćemo kreirati funkciju koja pretvara broj u valutu.
- Prvo ćemo kreirati dodatak. U vašem Nuxt projektu, unutar foldera dodataka, kreirajte datoteku pod nazivom 'format.js'.
- Zatim, unutar 'format.js', definirajte svoj prototip na sljedeći način:
export default ({ app }, inject) => {
inject('formatPrice', value => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(value);
});
}
- Nakon kreiranja dodatka, morate obavijestiti Nuxt o tome u vašoj datoteci 'nuxt.config.js':
export default {
...
plugins: ['~/plugins/format.js'],
...
}
Sada imate globalnu funkciju u vašoj Nuxt aplikaciji iz Vue prototipa i možete je pozvati bilo gdje u aplikaciji koristeći this.$formatPrice(1000) — i vratit će 1,000.00 USD.
Savjeti za korištenje prototipova u Vue i Nuxt
Evo nekoliko stvari koje treba zapamtiti kada koristite prototipove.
- Izbjegavajte sukobe imena. Uvjerite se da je ime vašeg prototipa jedinstveno i da ne zamjenjuje postojeća svojstva.
- Nemojte preterano koristiti prototipove. Može biti primamljivo koristiti prototipove za sve, ali važno je zapamtiti da prototipovi mogu otežati razumijevanje i otklanjanje grešaka koda. Dakle, koristite ga mudro.
Sve u svemu, dodavanje prototipa vašoj Vue aplikaciji pomoću Nuxta je odličan način da učinite svoj kod efikasnijim i višekratnim. To je moćan alat koji, kada se pravilno koristi, može povećati vašu razvojnu efikasnost.
