Vuex - nested objekti

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
    }
},

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…

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

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?

Kakav ti je routing ?

Da li za svaki parent object imas mapiranu rutu ?

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…


Copyright © 2022 WM Forum - AboutContact