Primul hop cu Vue: comunicarea între componente

Primul hop cu Vue: comunicarea între componente

La React tratam relativ simplu comunicarea între componente (e.g. părinte -> copil -> părinte): trimiteam un callback ca prop, îl apelam în copil, toată lumea era fericită.

Paradigma la Vue este un pic diferită: comunicarea de la părinte la copil se face cu props, comunicarea de la copil la părinte se face cu evenimente. În cele mai multe cazuri, treaba asta este suficientă, dar cred că am găsit un caz mai deosebit: un indicator AJAX. Să explic.

La sistemul actual am rânduri de tabel (tr), iar fiecare celulă de tabel are un select care, la nevoie, face câte unul-două request-uri AJAX. Din motive de UX, vreau să afișez un indicator de încărcare în dreptul acestul element.

Eh, dar ce vine de la AJAX stă în state. Iar componenta nu are nevoie să știe treaba asta. Cum procedez?

După ce am întors problema pe toate părțile, am ajuns la o soluție acceptabilă: trimit un callback prin props! Exact cum face React! Heh, cine s-ar fi gândit?!

Prin urmare, situația simplificată e așa:

  1. Din părinte trimit un callback: Select :loadValues="getValues";
  2. getValues întoarce un Promise (care tratează cu Vuex în cazul meu);
  3. În copil, acest Promise este tratat ca mai jos
enterEditMode() {
    if (!this.editable || this.isLoading || this.isEditing) {
        return;
    }

    this.isLoading = true;

    this.loadValues(this.name).then((data) => {
        this.isLoading = false;
        this.isEditing = true;

        this.options = data;
    })
}

Habar n-am dacă este o metodă mai bună de atât, dar pentru mine este o soluție care funcționează. Yay! Doar că a trimite funcții ca props este – aparent – un antipattern în lumea Vue (sau asta e concluzia la care am ajuns, pentru că nu prea se tratează problema asta). Probabil va ajunge să mă muște de fund mai târziu treaba asta…

Al doilea hop (care cred că este valabil și la React) este: cum folosesc aceeași logică pe mai multe template-uri? Am fix aceeași funcționalitate a tabelului în mai multe locuri dar coloanele sunt diferite (deci sunt doar alte endpoint-uri AJAX și alte template-uri). Momentan am găsit ceva despre Mixins, dar încă nu sunt sigur că e ceea ce am nevoie. Mai căutăm…

(încă îmi păstrez părerea de acum câteva zile: Vue e mai plăcut decât React).

3 Comentarii

Alexandru a scris

In React (facand cateva tutoriale myself) as face treaba asta prin Context API (practic ai un context shared la care toti au acces daca vor) saaaaauuu prin ceva Redux like (si in vue ai vuex, practic aceeasi idee dar cu o alta implementare).

Si mie mi se pare sincer treaba asta cu callback mai ciudata.

Alexandru a scris

Legat de sharing intre template-uri, sunt mai multe use case-uri aici:

1) ai cam acelasi HTML si event handlere => le extragi intr-o componenta generica, reutilizabila

2) daca se pot extra functii generale pe care le poti folosi in diverse locuri le extragi (daca nu au legatura cu dom-ul ci mai mult cu logica)

Adaugă un comentariurăspuns pentru

Poți adăuga bucăți de cod folosind [code]codul tău aici[/code], [js][/js], [php][/php] etc.

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Acest sit folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter