Webpack 代码拆分vuex应用程序

我有一个商店，我想在上面应用代码拆分

下面我试了一下：

import Vuex from 'vuex'
import Vue from 'vue'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'

const store = new Vuex.Store({
  strict: debug,
  plugins: debug ? [createLogger] : [],
  state: {
    loading: false
  },
  mutations: {
    toggleLoading: (state) => {
      state.loading = !state.loading
    }
  },
  getters: {
    loading: state => state.loading
  },
  actions: {
    toggleLoading: ({commit}) => {
      commit('toggleLoading')
    }
  }
})

import('./modules/userModule').then(userModule => {
  store.registerModule('user', userModule)
})
import('./modules/tenantsModule').then(tenantsModule => {
  store.registerModule('tenants', tenantsModule)
})
import('./modules/updatesModule').then(updatesModule => {
  store.registerModule('updates', updatesModule)
})

export default store

但应用程序失败：

网页包-internal:///24:739 [vuex]未知获取程序：用户

---

我做错了什么？

如果您在模块中使用

导出默认值

，您需要通过点符号（我在4.2中读到的内容）访问它。因此，下面这样的方法对我很有效：

import('./modules/userModule').then(userModule => {
    store.registerModule('user', userModule.default)
})

然而，我对这种方法有一些问题。我经常在初始页面加载时使用存储，到那时模块还没有加载。因此，我在声明存储时直接注册我最初需要的存储部分，如下所示：

import userModule from './modules/userModule'

Vue.use(Vuex);

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

---

希望这有帮助

如果您试图访问尚未定义的

user

getter，则会出现该错误。通过

this.$store.getters.user

或

mapGetters（['user']）

。您是否在代码中的其他地方访问过这样的getter？@thanksd-我确实定义了它，如果不使用代码拆分，它就可以工作。我猜这与它现在异步加载模块的事实有关。啊，好吧，您正在

用户

模块中定义它。我现在明白了。是的，这肯定是因为在您尝试访问该模块时，该模块尚未加载。但不确定解决方案是什么。。。