Vue.js vuex动态模块寄存器显示对象为空

我已使用此函数注册了vuex模块

this.$store.registerModule（this.name，'some_module'）

module已创建，但在vuedevtools中显示为空

我正试图使用此代码分派此.store.dispatch（this.name+'/some_action'，this.id）此返回错误未知操作类型

请帮助任何人如何动态创建vuex模块

存储索引.js

    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// Load store modules dynamically.
const requireContext = require.context('./modules', false, /.*\.js$/)

const modules = requireContext.keys()
  .map(file =>
    [file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)]
  )
  .reduce((modules, [name, module]) => {
    if (module.namespaced === undefined) {
      module.namespaced = true
    }

    return { ...modules, [name]: module }
  }, {})

export default new Vuex.Store({
  modules
})

somo_module.js

import Vue from 'vue'
import axios from 'axios'
import * as types from '../mutation-types'

// state
export const state = {
    count: ''
  }

  // getters
  export const getters = {
    count: state => state.count
  }

  // mutations
  export const mutations = {
    [types.GET_COUNT] (state, data ) {
      state.count = data
    }
  }

  // actions
  export const actions = {

    async some_action ({ commit }, payload) {
      try {
        const { data } = await axios.post('/count/'+payload)
        commit(types.GET_COUNT, data )
        // console.log(data)
      } catch (e) {

      }
    }
}

---

首先，您必须确保this.name！==未定义然后您可以像这样动态地将模块添加到存储中（根据和）

并像往常一样使用它。$store.dispatch（'yourModule/someAction'）

如果您愿意，也可以像这样更新store index.js，以便注册默认情况下导出为对象的模块

myModule.js

const state = {}
const actions = {}
const getters = {}
const mutations = {}

const module = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

export default module

---

存储索引.js

    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// Load store modules dynamically.
const requireContext = require.context('./modules', false, /.*\.js$/)

const modules = requireContext.keys()
  .map(file =>
    [file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)]
  )
  .reduce((modules, [name, module]) => {
    if (module.namespaced === undefined) {
      module.namespaced = true
    }

    return { ...modules, [name]: module }
  }, {})

export default new Vuex.Store({
  modules
})

正如你在下面看到的，我只对reduce方法做了一点小的修改

---

你能包含更多的代码吗？您是否使用

名称空间声明模块

？此答案可以通过解释其工作原理/如何回答问题来改进。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// Load store modules dynamically.

const requireContext = require.context('./modules', false, /.*\.js$/)

const modules = requireContext.keys()
  .map(file =>
    [file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)]
  )
  .reduce((modules, [name, mod]) => {

    let module = mod.default || mod

    if (module.namespaced === undefined) {
      module.namespaced = true
    }

    return { ...modules, [name]: module }
  }, {})

export default new Vuex.Store({
  modules
})