javascript - Granular organisation with Vuex -

i'm working on large project, , want break vuex modules many parts possible. example, want separate api functionality ui, keeping data comes server isolated component flags , so.

in documentation (http://vuex.vuejs.org/en/structure.html), authors suggest break modules, great. issue comes when have, let's say, products page , products data, , want keep them separated.

is possible achieve this:

{   modules: {     api: {       products: // ...     },     pages: {       products: // ...     }   } } 

and able access them store.api.products , store.pages.products? getting wrong?

thanks!

i've been taking @ vuex code , i've found this:

// retrieve nested modules const nestedmutations = this._createmodulemutations(module.modules, newnestedkeys) 

it turns out can make vuex modules granular doing:

{   modules: {     api: {       modules: {         products: /* ... */       }     },     components: {       modules: {         page: /* ... */       }     }   } } 

and result in state structure like: