代碼拆分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應用程序

回答

相關問題