Nuxt modules state

Question

I have an nuxt app with modules state:

• Store
  • index.js, state.js, mutations.js, actions.js, getters.js
  • Modules
    • Posts
    • index.js, state.js, mutations.js, actions.js, getters.js

In Store/index.js I have:

import state from './state'
import * as actions from './actions'
import * as mutations from './mutations'
import * as getters from './getters'

import posts from './modules/posts'

export default {
  state,
  getters,
  mutations,
  actions,
  modules: {
    posts
  }
}

Inside Store/state.js I have:

export default () => ({
  test: null
})

Inside Store/Modules/Posts/index.js I have:

import state from './state'
import * as actions from './actions'
import * as mutations from './mutations'
import * as getters from './getters'

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

And inside Store/Modules/Posts/state.js I have:

export default () => ({
  dialog: false,
  test: false
})

My store now has duplicated everything from getters, actions etc. Should it be that way or not? Am I using store how I should or not? When I remove modules from base inldex.js I have one of everything but then, everything is undefined.

Store output example:

Answer 1

You don't need the 'modules' folder at all. Nuxt is clever enough to puzzle together your store from the files and directory structure. So, your example could be like this:

• Dir: store
  • state.js, mutations.js, actions.js, getters.js
  • Dir: posts
    • state.js, mutations.js, actions.js, getters.js

Note that you don't need the index.js files either! In fact, if your store doesn't have a specific root state, then no need to have the files under the store directory.

The docs are a bit vague on what should be in each file. Here is a quick guide:

state.js
export default () => ({
  field1: 'init value',
  field2: 'init value'
})

mutations.js
export function mutation1(state, payload) {...}
export function mutation2(state, payload) {...}

getters.js
export getter1(state, getters, rootState, rootGetters) {...}
export getter2(state, getters, rootState, rootGetters) {...}

actions.js
export action1(context, payload) {...}
export action2(context, payload) {...}