Sarcasm
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 ), 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.