Šta je mixin?
Mixin-i su “reusable” delovi koda koji mogu da se višekratno iskoriste u bilo kojoj Vue komponenti ili instanci. Vue.js mixin je u stvari objekat koji može sadržati sva svojstva kao i options objekat instance/komponente: data, methods, computed…
“Mixin” se koriste za:
- Kreiranje zajedničikh svojstva (metoda, data…), koje se koriste u različitim komponentama i tako omoguće poštovanje DRY (“Don’t Repeat Yourself”) principa.
- Pri kreiranje plugina koje imaju potrebu da modifikuju postojeću Vue instancu, jer mogu jednostaavno da dodaju nove funkcionalnosti.
Domen mixin-a
Mixin se integriše u instancu (komponentu) tako što se u komponentu ugradi kopija koda napisanog u mixin-u. Ovo povlači zaključak da je kod koji je došao u komponetu iz mixina potpuno odvojen i nezavisan kako od samog mixina tako i od koda ugradjenog u ostale komponente.
Sintaksa za korišćenje mixin-a
Kreiranje mixin-a
Da bi kreirali mixin potrebno je da definišemo novu promenjivu koja će da ga predstavlja.
Primer
|
1 2 3 4 5 6 7 |
var nazivMixina = { methods: { poruka () { console.log('Poruka naprevljena u mixin-u!') } } } |
Ukoliko smo u mogućnosti da koristimo module, poželjno je da izdvojimo sadržaj mixina u novi fajl (modul):
Primer – nazivMixina.js
|
1 2 3 4 5 6 7 |
export const nazivMixina = { methods: { poruka () { console.log('Poruka naprevljena u mixin-u!') } } } |
Integrisanje mixin-a u komponentu
Integrisanje mixina u komponentu je jednostavano, i izvodi se koristeći svojstvo sa nazivom “mixin”. Svojstvo mixin je niz svih naziva mixina koje koristimo u datoj komponenti:
|
1 2 3 4 5 6 7 |
new Vue({ el: "#app", data: { message: "Neka poruka" } mixins: [mixin] }) |
Nakon ubačenog mixin-a Vue instance dobija novu funkcionalnost metodu hello().
Pravila pri miksovanju/spajanju svojstava
Kada komponenta koristi mixin, sva svojstva iz mixin-u će biti “izmixovana” (“stopljena”) sa postojećim svojstvima komponente. U slučaju konflikta svojstvo definisano u komponenti ima prednost u odnosu na svojstvo sa istim imenom iz mixin-a. Ovo se dešava iz razloga jer se “mixin” udica (hooks) izvršavaju pre udica iz komponente, stoga svojstva iz komponent “gaze” svojstva sa istim imenom iz mixina.
Primer
U ovome primeru je prikazano kako se “mixuju” svojstva iz ubačenog mixina i postojeća svojstva u komponenti.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var mixin = { data: function () { return { message: 'poruka iz mixina', svojstvoMixina: 'abc' } } } new Vue({ mixins: [mixin], data: function () { return { message: 'poruka iz komponente', svojstvoKomponente: 'def' } }, created: function () { console.log(this.$data) // Vraća: { message: "poruka iz komponente", svojstvoKomponente: "def", svojstvoMixina: "abc" } } }) |
Pošto svojstvo pod nazivonm “message” postoji i u mixinu i u instanci, Vue.js daje prednost instanci pa će svojstvo ostati ne promenjeno message: “poruka iz komponente”, dok će svojstvo iz mixina pod nazivom “svojstvoMixina” postati novo svojstvo instance.
Primer
U ovome primeru se na osnovu redosleda poruka u konzoli vidi da se mixin izvršava pre komponente, te stoga se metoda “sayHello()” iz komponente poslednja izvršava i zbog toga “gazi” već učitanu metodu sa istim imenom iz mixina.
Globalni mixin
Postoji mogućnost da se uz odgovarajuću sintaksu kreira tzv. “globalni mixin”, koji se automatski dodaje SVAKOJ komponenti ili instanci. Automatsko dodavanje komponenti podrazumeva da nakon definisanja glabalnog mixin-a nije potreban dodatni kod za ubacivanje u komponentu jer to Vue.js sam radi u pozadini. Globalni mixin-i se najčešće koriste pri izradi “third party” plugina, jer tako jednostavno ubacuju kod u aplikaciju.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } }) new Vue({ myOption: 'hello!' }) |
NAPOMENA:
Budite veoma obazrivi kada koristite globalni mixin jer se on automatski dodaje SVAKOJ INSTANCI I KOMPONENTI uključujući i “third party” komponente.
Primer
U ovome primeru se zahvaljujući globalnom mixinu u konzoli štampaju 4 poruke “Ovo je poslato iz mixina, i štampa se u okviru svake komponente i instance”. Jedna zbog glavne instance i još 3 zbog komponenti. Redosled izvršavanja:
- Glavana instanca
- App komponenta
- Chidl1 komponenta
- Child2 komponenta