Issues with registering Vuex modules, either namespaces not found or getters.default is empty

Question

I've been going in circles trying to set up Vuex modules for a project. I've tried following a tweaked example of Chris Fritz example of registering components in a more productive way as seen here: https://www.youtube.com/watch?v=7lpemgMhi0k, but when I try to use ...mapActions, I get issues that the namespace can't be found, if I try to register the modules manually, I get the error that the getter.default expected an action, but returned {}

I'll try keep this clean - the first lot of info is my module setup, the next section is what produces the first issue and the code, the second is the second attempt which produces the getter issue.

My Module setup...

./store/modules/ModuleName:

./store/modules/ModuleName/index.js

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

const namespaced = true

export default {
    namespaced,
    state () {
        return {
            foo: 'bar'
        }
    },
    actions,
    getters,
    mutations
}

./store/modules/ModuleName/actions.js

import types from './types'

const myFunction = ({ commit, state }) => {
  commit(types.FOO, bar)
}

export default {
   myFunction
}

./store/modules/ModuleName/getters.js

const Foo = (state) => {
    return state.foo
}

export default {
    Foo
}

./store/modules/ModuleName/mutations.js

import types from './types'

const mutateFoo = (state, payload) => {
    state.Foo = payload
}

export default {
    [types.FOO]: mutateFoo
}

./store/modules/ModuleName/types.js

export default {
    FOO: 'foo'
}

Version one

This is the preferred way I'd like to do it:

Error: [vuex] module namespace not found in mapActions(): myModule/

./store/modules.js

const requireModule = require.context('../store/modules/', true, /\.js$/)
const modules = {}

requireModule.keys().forEach(fileName => {
    // Use index to prevent duplicates of the same module folder...
    if (fileName.includes('index')) {
        // now I just want the folder name for the module registration
        const moduleName = fileName.replace(/(\.\/|\/.+\.js)/g, '')
        modules[moduleName] = requireModule(fileName)
    }
})

export default modules

./store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
    modules
})

.Vue component:

<template>
    ...
</template>

 <script>
      import { mapState, mapActions } from 'vuex'

      export default {
          computed: { 
               ...mapState('ModuleName', { title: state => state.foo })
          },

          methods: {
               ...mapActions('ModuleName, ['myFunction'])
          }
      }

 </script>

Version Two

Error:

Uncaught Error: [vuex] getters should be function but "getters.default" in module "Harvest" is {}.

./store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import Harvest from './modules/myModule'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        myModule
    }
})

.Vue component:

<template>
    ...
</template>

 <script>
      export default {
          computed: { 
               title () { return this.$store.getters.myModule }
          }
      }

 </script>

What am I missing? Can someone help shed a bit of light to get this working?

Answer 1

For your Version two, because you export default, your import state should be:

import actions from './actions'
import getters from './getters'
import mutations from './mutations'

const namespaced = true

export default {
    namespaced,
    state () {
        return {
            foo: 'bar'
        }
    },
    actions,
    getters,
    mutations
}

For version 1, first you should change import statement as above, then change

  if (fileName.includes('index')) {
    // now I just want the folder name for the module registration
    const moduleName = fileName.replace(/(\.\/|\/.+\.js)/g, '')
    modules[moduleName] = requireModule(fileName).default
  }

Hope it can help!