Using module files

We can split big files in our modules into separate files – state.js, actions.js, mutations.js, and getters.js – for the store root and each module. So, let's do so with the following steps:

1. Create separate files of the state, actions, mutations, and getters for the store root, as follows:

// store/state.js
export default () => ({
  number: 3
})

// store/mutations.js
export default {
  mutation1 (state) { ... }
}

2. Create separate files of the state, actions, mutations, and getters for the module, as follows:

// store/module1/state.js
export default () => ({
  number: 1
})

// store/module1/mutations.js
export default {
  mutation1 (state) { ... }
}

Again, in Nuxt, we do not need to assemble these separate files with index.js as we do in a Vue app. Nuxt will do this for us as long as we use the following structure:

// chapter-10/nuxt-universal/module-files/
└── store
    ├── state.js
    ├...