代码拆分vuex应用程序

我有一个vuex存储，我想对其应用代码拆分。代码拆分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内部：/// 24：739 [vuex]未知的getter：用户

我做错了什么？

来源

2017-07-27 Tomer

如果您尝试访问您未定义的'user' getter，则会出现该错误。通过'this. $ store.getters.user'或'mapGetters（['user']）''。你在代码中的其他任何地方访问getter吗？ – thanksd

@thanksd - 我确实定义了它，如果我不使用代码拆分，它就可以工作。我猜测它与现在加载模块异步的事实有关。 – Tomer

好的，你在你的'user'模块中定义它。我现在知道了。是的，这绝对是因为该模块在您尝试访问时尚未加载。不知道解决方案是什么，但... – thanksd

如果在你的模块中使用export default，你需要通过点符号来访问它（我读的是4.239下的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} 
})

希望这有助于！

来源

2017-08-05 17:23:42

代码拆分vuex应用程序

回答

相关问题