VueJS - Pristup pri izgradnji SPA

Programiranje
1

Pozdrav.

Izgradnja Single Page Aplikacija sa VueJS-om bi trebala biti prilicno jednostavna, sto u biti i jeste sve dok se ne dodje do nekih tricky stvari.Vue Router je odlican, i doslovno u par minuta se slozi jednostavna SPA, ali kompleksnije stvari mogu biti prilicno zeznute i sve se pretvara u nocnu moru :smile: (ili ja radim na pogresan nacin) .

Idem logikom da svaka komponenta predstavlja page, to definiram u routeru i sve sljaka, ali problem je taj sto neke stvari iz komponente moraju biti upotrebljive i van te komponente - u biti da budu dio global scope-a.

U mom slucaju se radi o shopping kosarici, koja se nalazi van komponente, a unutar komponente se nalazi masa stvari koje se mogu odabrati, izmedju ostalog i Add to cart button, koji ce naravno dodati item u kosaricu.

Na koji nacin je ovo najbolje handle-ati ? Neki hint ? Hvala.

1 Like
2

E odlicno pitanje!

VueJS mi se cini odlican framework samo mu je jedina mana nedostatak naprednih tutorialaā€¦

Ja bi ti savjetovo da pogledas serijal di Taylor Otwall objasnjava kako radi Laravel spark jer ako se dobro sjecam tamo je header globalna komponenta jer sadrzi podatke o useru i objasnio je kako to radiā€¦ https://laracasts.com/series/laravel-spark

I zasto samo ne registriras globalnu komponentu koja je stalno aktivna?
https://vuejs.org/guide/components.html#Registration

1 Like
3

Kriva logika. kada bi to tako bilo onda se to nebi zvala komponenta, nego neznam npr. pageComponent. Svaka komponenta predstavlja jednu poziciju i zasebnu cijelinu na stranici. Od razlicitih komponenti slazez jednu stranicu, tako bi u tvom primjeru kosarica bila jedna komponenta, kojoj onda mozes pristupiti na svakoj stranici, svaka komponenta ima svoju logiku kojom dohvaca svoje podatke. Na taj nacin dobijas da ti je svaka komponenta izolirana od ostatka i da ne utjece na druge komponente na stranici, a i znatno je lakse testirati svaku komponentu nego ovako kako si ti zapoceo.

Dakle komponenta je jedan element na stranici, stranica je slozena od vise komponenti.

Btw. Kada si se vec primio JS i Frontend developmenta, onda se okreni pravim stvarima ostavi taj VueJS i pocni sa Angular 2. Daleko najmocnije sto sam do sada vidio i definitivno sam si uzeo za zadatak da ga upocnem koristiti vise, a evo poceo sam raditi i jednu aplikaciju u njemu. Odlican documentation, odlican community i odlican dev team stoji iza toga(Google i MS) zar treba vise.

2 Likeova
4

Slazem se sa prvim dijelom, ali ne i sa preporukom za Angular 2, odnosno tvrdnjom da je to prava stvar a Vue.js nije. Ne postoji jedan pravi framework, svaki ima nekakav svoj approach a na tebi je da odaberes sta tebi pase. Meni osobno se Vue.js svidja vise od Angulara.

1 Like
5

Ne vidim na koji nacin bi se moglo rijesiti ovo sa VueJS osim sa nekim parent komponentama koje se ponasaju kao stranice ?

Ako pogledas ovdje http://router.vuejs.org/en/basic.html vidis da se i tu kopmonente ponasaju kao page-ovi, ali ovo je daleko jednostavniji primjer.Ne znam kako je routing rijesen u Angularu, vjerovatno ne isto kao kod VueJS-a.

U firmi trenutno razvijamo jedan mini reordershop sa VueJS-om, bila je dilema izmedju Angulara 2 ili VueJS i odabrali smo VueJS.

Nije losa stvar, dosta je slobodan, a uskoro izlazi i 2.0 verzija pa cemo da vidimo neka poboljsanja.Definitivno cu se poigrati sa Angularom 2, ali ne sada.

6

Ovo bi moglo upaliti, budem pokusao.

7

Samo mi sad reci gdje sam ja napisao da VueJS nije prava stvar ili ne valja ili nesto slicno.

8

Ja sam tko shavtio ovu tvoju recenicu:

ā€œBtw. Kada si se vec primio JS i Frontend developmenta, onda se okreni pravim stvarima ostavi taj VueJS i pocni sa Angular 2.ā€

9

Ponavljam da ti je logika razmisljanja kriva. Komponenta nije page, komponenta je upravo to komponenta, slikovito prikazano:

<div class="product">
<h2>Product title</h2>
<section>
<p>Product descriptiion .....</p>
</section>
<footer>
<a href="#">Add to cart</a> | <a href="#">View details</a>
</footer>
</div>

Ovo gore je jedna komponenta, ta komponenta ima svoje metode kojim dohvaca podatke o proizvodu. Ta komponenta se nalazi u npr. product.js datoteci, tu komponentu sada mozes na svakoj stranici gdje ti treba pozvati sa npr. product listing stranici, shoping cart stranici, recommended artcile slideru itd. itd. I ona ce funkcionirati uvijek i neovisno o kontekstu u kojem se nalazi.

10

Sta ti se nije svidjelo kod Angular 2?

11

Razumijem je sta je komponenta i zasto sluzi, kako se kreira i slicno.

Ili nisi pogledao link koji sam ostavio gore, ili se ne razumijemo bas najbolje.

Ako ima neki bolji nacin za rijesiti, unutar VueJS-a, vrlo rado bih ga volio cuti.

12

Previse je opinionated za moj ukus, volim imati vecu slobodu kod strukturiranja svog projekta. Takodjer mi se ne svidja forsiranje TypeScript-a, iako znam da nije nuzan za rad sa Angularom, no dosta tutoriala ga koristi.

13

Da, to je i meni zapalo za oko.Cak i nema dovrsene dokumentacije za JS, vec samo za TS.

14

`



<router-view class="view"keep-alive> // Ovo ti ucitava komponente stranice preko routera
`

Onda u routeru imas nprā€¦

export function configRouter (router) { router.map({ "/admin": { component: require("./views/admin/index/adminIndex.vue"), name: "adminIndex", title: "Admin panel" }, "/companies": { component: require("./views/admin/companies/adminCompaniesIndex.vue"), name: "adminCompaniesIndex", title: "All companies" } }) }

I zasebno jos napravis komponentu
var Cart = Vue.extend({ template: "<div>Sta ti vec treba</div>" }) Vue.component('cart', Cart )

PS. Neznam zasto ne prihavca tabove u koduā€¦

15

Bojim se da se i dalje ne razumijemo bas najbolje pa evo malo konkretniji, ali vrlo jednostavan primjer.

U mom slucaju se radi o shopping kosarici, koja se nalazi van komponente, a unutar komponente se nalazi masa stvari koje se mogu odabrati, izmedju ostalog i Add to cart button, koji ce naravno dodati item u kosaricu.

A primjer neka bude radio input koji se nalazi unutar komponente i koji sluzi za biranje boje.

<div class="Radio">
           <input type="radio" id="radio3" name="color" value="glb" v-model="color">
           <label for="radio3"></label>
</div>

Ono sto ja na neki nacin zelim je da mogu na vrlo jednostavan nacin dohvatiti vrijednost inputa i van te komponente

{{ color }}

Na ovaj nacin - u biti to je samo obicni string koji treba biti ispisan.

16

Routing nije problem, mada evo kako to kod mene izgleda

define([
    'vue',
    'vue-resource',
    'vue-router'
], function(Vue, VueResource, VueRouter){


    Vue.use(VueRouter);


    var shopHome = Vue.extend({
        
        template: '#shop-template'


    });

    var shopSingle = Vue.extend({

        template: '#item-template'

    });

    var shopLenses = Vue.extend({

        template: '#lenses-template',

    });


    var router = new VueRouter({

        history: false,

        root: '/',

        hashbang: false,

    });

    router.map({

        '/': {

            component: shopHome

        },

        '/shopsingle': {

            component: shopSingle

        },

        '/shoplenses': {

            component: shopLenses

        }

    });

    var Main = Vue.extend();

    router.start(Main, '#main');


});
17

Da vidim problemā€¦

Mozda je malo nezgodno rijesenje ali sta mislis na u glavnom vue istanci u data dodas color pa u komponenti napravis listener ili computed property koja bi svaki put kad se boja promjeni postavila i color u glavnoj Vue istanci?

Mozda ovo pomogne: http://stackoverflow.com/questions/34509103/vue-components-communication

18

Zar router ne kreira root Vue instancu ?

router.start(Main, '#main');

19

A sta ti se nalazu u router.start(Main, ā€˜#mainā€™); ?

20

Mislis na markup (HTML) ?