VueJS - Pristup pri izgradnji SPA

Sarcasm :wink:

creatifcode je izumio novi patern, Introversion pattern

Evo da javim, da je ovo rijeseno.

Prvo sam isao sa Vuex-om, ali prilicno komplicirana stvar, tako da sam odradio namjenski state management za ovo sto mi treba.

Imam jedan store file za kosaricu i sve radi full.

Anti-pattern ? Hm ne bih rekao :))

A sto se tice Angulara 2, mislim da ce ih Vue ubiti sa 2.0 verzijom, jer dolazi sa Virutalnim DOM-om (inspired by react :stuck_out_tongue: ), sto znaci daleko bolje performanse.

Procitao sam nekih 15 konverzacija. Ali savet ako zelis da imas komponente koje su totalno nezavisne jedna od druge, drugim recima da se ponasaju kao widgets input, output koristi RxJS publish, subscribe princip preslikan iz Angular. Meni je olaksao zivot. A scope ostaje isključivo za scope komponente. Komponente su izlolovane i medjusobno kominiciraju preko events.

Ma stvar je bila u klasicnoj Shopping kosarici, gdje imam jednu View Komponentu (vezana za rutu) i bag komponentu, u kojoj treba prikazati iteme iz kosarice, odnosno iteme koji su dodani iz view komponente.

Postoji Vuex, ali prilicno je komplikovano, tako da sam napravio neki jednostavan state management koji me dobro sluzi.

U biti funkcionira na sljedeci nacin

Store.js

export default {
    data: {
        bag: []
    }

   add(item) {
       this.data.bag.push(item)
   }
   // other methods, etc...
  
} 

Vanilla JS stvari, definiran objekt kojem cu kasnije pristupi u komponenti, kao i metode.

Component.vue

import Store from '../store'

export default {
    data() {
        return {
           shared: Store.data, // access to the store data
           item: {
              // fetched from API, hardcoded here
              id: null,
              name: null,
              qty: 1
           }
        }
    },

    methods: {
       Store.add(this.item) // Called add method from the Store file, and sent function param
    }
}

I na kraju Bag.vue

import Store from ‘…/store’

export default {
    data() {
        return {
            items: Store.data.bag
        }
    }
}

I to je to.U biti malo je drugacije u real aplikaciji, jer client i server side su sinhronizovani - kada se doda produkt, radim POST request prema API endpointu, tako da i nakon reloada produkt je tu, a sve je i dalje reaktivno.