Question

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

关注this tutorial我尝试了这个：

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

但是申请失败了：

webpack-internal：/// 24：739 [vuex] unknown getter：user

我做错了什么？

Answer 1

如果在模块中使用export default，则需要通过点表示法访问它（我在4.2下阅读here）。所以下面的内容对我有用：

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}
})

希望这有帮助！

代码拆分vuex应用程序

1 个答案: