In the official Nuxt documentation (here), it is mentioned that 'You can choose to divide a module file into separate files: state.js, actions.js, mutations.js, and getters.js'.
While there are examples of breaking down the Vuex store at the root level into individual files like state.js, actions.js, mutations.js, and getters.js, there is limited information on breaking down the modules themselves.
My current project structure looks like this:
├── assets
├── components
└── store
├── moduleOne.js
├── moduleTwo.js
└── etc...
What I want to achieve is:
├── assets
├── components
└── store
└── moduleOne
└── state.js
└── getters.js
└── mutations.js
└── actions.js
└── moduleTwo
└── etc...
To experiment with this structure, in /store/moduleOne/state.js I have defined the state as follows:
export const state = () => {
return {
test: 'test'
}
};
And in /store/moduleOne/getters.js I have defined the getters like this:
export const getters = {
getTest (state) {
return state.test;
}
}
When trying to access this in my component using
$store.getters['moduleOne/getters/getTest']state.test being undefined.
Even attempting to import state from state.js into getters.js doesn't seem to work.
Is there anyone who has successfully implemented this modular breakdown of the store in Nuxt? If so, could you provide an example?