注册 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，首先你应该像上面一样改变 import 语句，然后改变

  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
  }

希望能帮到你！