Getting rid of an nested data objects in VueJS

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 {

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: {

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 ?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.