Getting rid of an nested data objects in VueJS

[bedakb]

Hello everyone

I’m playing around with VueJS in combination with Vuex,Vue Router and Vue Resource.

This is data structure that I have and I think there are redutand things, it would be nice if I could keep just one parent object and then access to data.

In my actions.js I’m fetching data from specific API endpoint, and then store it in product object

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

Then I have this in single.js store file, and then single object is nested under product

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
}

And at the end I have the getter into component, that stor data again into product object

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

So as title say, is there a way to make this more simpler, to make it for e.g only like product>data not product>single>product>data ?