Nuxt + Vuex – How do I break down a Vuex module into separate files?

by

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?

106 thoughts on “Nuxt + Vuex – How do I break down a Vuex module into separate files?”

Leave a Comment