In the Nuxt documentation (here) it says ‘You can optionally break down a module file into separate files: state.js
, actions.js
, mutations.js
and getters.js
.’
I can’t seem to find any examples of how this is done – lots of breaking down the Vuex store at the root level into state.js
, actions.js
, mutations.js
and getters.js
, and into individual module files, but nothing about breaking the modules themselves down.
So currently I have:
├── assets
├── components
└── store
├── moduleOne.js
├── moduleTwo.js
└── etc...
And what I would like to have is:
├── assets
├── components
└── store
└── moduleOne
└── state.js
└── getters.js
└── mutations.js
└── actions.js
└── moduleTwo
└── etc...
To try this out, in /store/moduleOne/state.js
I have:
export const state = () => {
return {
test: 'test'
}
};
and in /store/moduleOne/getters.js
I have:
export const getters = {
getTest (state) {
return state.test;
}
}
In my component I’m accessing this with $store.getters['moduleOne/getters/getTest']
However using the debugger and Vue devtools, it seems like state isn’t accessible in the getters file – it seems to be looking for a state in the local file, so state.test
is undefined.
Attempting to import state
from my state.js
file into my getters.js
file doesn’t seem to work either.
Does anyone have an example of how they’ve managed to break the store down like this in Nuxt?
In nuxt version 2.14^ you don’t necessary have to create this in your store root index.js file.
But instead, you can just leave your root index.js file as default or do what you need. No need to import.
store/index.js
And this how it looks like, its very simple.
Folder structure
Example
store/posts/index.js
you can just put the state function. You don’t need to import the actions, getters and mutations.store/posts/actions.js
store/posts/mutations.js
store/posts/getters.js
Your issue
Use
default
exports in your files to achieve the desired effect (no named exports except in theindex.js
)Example
An example can be found directly in the Nuxt.js test suite (at https://github.com/nuxt/nuxt.js/tree/dev/test/fixtures/basic/store/foo).
If you’d run the
basic
fixture and access the /store page you’ll see the following resultThe "repeated" contents in the module itself just show that the split-up values take priority (otherwise
getVal
wouldn’t return 10 but 99 andstate.val
wouldn’t be 4 but 2).store.vue code:
I am using nuxt
2.1.0
If you want to have something like this :
In my
store/index.js
Make sure you have namespaced: true
In moduleOne
In my
store/api-logic/index.js
In my
store/api-logic/getters.js
In module Two
In my
store/app-logic/index.js
In my
store/app-logic/getters.js
Anywhere in the app
Bonus Point
If you want to communicate between the modules for example a action in app-logic which trigger something in api-logic.
So app-logic (module one) to api-logic (module two)
When you specify
root: true
it will start to look at the root of the store.In
store/app-logic/actions.js
In
store/api-logic/actions.js
In
store/api-logic/index.js
add another entryIn
store/api-logic/mutations.js
add the pokemon mutation :pAnywhere in the app :
At the end your Vue devTool should look like this 🙂

And Voilà I hope It was clear.
Code example :
https://github.com/CMarzin/nuxt-vuex-modules