Vuex - nested objekti

Programiranje
1

Pozdrav svima.

Pokusavam odraditi nesto u kombinaciji sa Vuex+VueRouter+VueResource, pa sam zapeo na jednom dijelu

Kao sto vidite tu se nalazi dosta nested objekata, koji su totalno bespotrebni, i mnogo bi ljepse bilo kad bi se moglo napraviti da ima hierarhiju product>data, nego product>single>product>data

Zasto sam dobio ovakvu strukturu to znam, kako dobiti ono sto zelim hm bas i nemam neku ideju.A evo zasto

Prije svega imam jednu akciju u actions.js, gdje fetcham podatke sa odredjenog API Endpointa

export const getSingleProduct = ( {dispatch}, productName) => {
	productService.getSingleProduct(productName).then(result => {
		dispatch(types.GET_SINGLE_PRODUCT, { product: result.json() })
	})
}

Kao sto vidite data spremam u product object.

Dalje u tom nekom single.js store fajlu (koji je vezan za single view komponentu) imam definiran single state, i tu neku logiku za mutaciju.

import { GET_SINGLE_PRODUCT, ADD_TO_BAG } from '../mutation-types'

const state = {
	single: []
}

const mutations = {
	[GET_SINGLE_PRODUCT] (state, product) {
		state.single = product
	}

}

export default {
	state,
	mutations
}

I u view komponenti imam vuex getter koji ponovo ima product object

vuex: {
    getters: {
        product: ({single}) => single,
        productName: ({route}) => route.params.productName
    },
    actions: {
        getSingleProduct,
        addToBag
    }
},
2

Ako sam dobro shvatio u vuex getteru zelis imati samo product.data ?

   export const getSingleProduct = ( {dispatch}, productName) => {
	productService.getSingleProduct(productName).then(result => {
		dispatch(types.GET_SINGLE_PRODUCT, { product: result.json().product  })
	})
    }

    const state = {
    	product: []
    }
        
    const mutations = {
        	[GET_SINGLE_PRODUCT] (state, product) {
        		state.product = product
        	}

        }

I onda u getteru samo promjeni

 `getters: {
       product: ({product}) => product,
      productName: ({route}) => route.params.productName
  }`

Iskreno neznam dal sam sve dobro pohvato jer nisam nista testiro nego samo ovako piso ali mislim da bi to trebalo bit to…

3

Hvala pregledam detaljno sutra da vidim jesmo li se razumjeli :slightly_smiling_face:

4

Ej, zanima me tvoje razmisljanje o ovome, radim ono malo kompliciraniji Todo app…

I imam ovakstu strukturu (pojednostavljeno)

`Projects (object) {
      Projekt 1 (object) {
          Groups (object) {
               Grupa 1 (object) {
                   Tasks(object) {
                         Task { },
                         Task 2,3..
                   }
              },
              Grupa 2,3 ...
          }
     },
     Projekt 2, 3...
 }`

U vuexu imam state.all i state.activeProject
state.all su mi svi projekti
state.activeProject to je projekt koji je trenutno aktivan

To mi se cini skroz okej postavljeno.

E ali sam sada dosao do toga da moram raditi sa odrednom grupom u projektu pa sam u dilemi dali je ispravno dodati
state.activeGroup jer cu u jednom treutno opet morati dodati i state.activeTask …

E sad nekako mi se to sve cini malo “labavo” tj nisam siguron dal je to best practice, sta ti mislis?

5

Kakav ti je routing ?

Da li za svaki parent object imas mapiranu rutu ?

6

Imam, cak sam i o tome razmisljao da nadem aktivni objekt preko ID-a ali mi onda treba petlja koja ce proc kroz sve objekete i nac id koji je aktivan u route parametrima a ako bi bilo npr. 1000 rezultata neznam kolko je to efikasno…