注册 Vuex 模块时出现问题，找不到命名空间或 getters.default 为空

Question

我一直在兜圈子，试图为一个项目设置 Vuex 模块。我尝试遵循 Chris Fritz 以更高效的方式注册组件的调整示例，如下所示：https://www.youtube.com/watch?v=7lpemgMhi0k，但是当我尝试使用......mapActions，我遇到找不到命名空间的问题，如果我尝试手动注册模块，我会收到 getter.default 期望操作但返回 {}

的错误我会尽量保持干净 - 第一批信息是我的模块设置，下一部分是产生第一个问题和代码的原因，第二部分是产生 getter 问题的第二次尝试。

我的模块设置...

./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'
}

版本一

这是我想做的首选方式：

错误：在 mapActions(( 中找不到 [vuex] 模块命名空间：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 组件：

<template>
...
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: { 
...mapState('ModuleName', { title: state => state.foo })
},
methods: {
...mapActions('ModuleName, ['myFunction'])
}
}
</script>

版本二

错误：

未捕获的错误：[vuex] getter 应该是函数，但 模块 "Harvest" 中的 "getters.default" 是 {}。

./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 组件：

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

我错过了什么？有人可以帮助阐明这一点吗？

Answer 1

对于您的版本二，因为您export default，您的导入状态应为：

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
}

对于版本 1，首先您应该更改上述导入语句，然后更改

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
}

希望能有所帮助！