首页 > 解决方案 > 如何正确地延迟加载 Vuex 模块?

问题描述

我尝试以这种方式注册它们。
调用时store.state['CHAT_BASE'].someData抛出错误,试图获取未定义的值。
使用静态导入,一切正常。

.vuex 文件

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

Vue.use(Vuex);

const enableLogger = false, /* You can do this: process.env.NODE_ENV !== 'production' */
    store = new Vuex.Store({
        strict: false,
        plugins: enableLogger ? [createLogger()] : [],
        modules: {
            COMMON: () => import('./modules/common'),

            /* Operators cabinet. */
            RMS_REQUESTS: () => import('./modules/rms/operators_cabinet/requests'),

            /* Request tree. */
            RMS_PROCESS_DATA: () => import('./modules/rms/request_tree/process_data'),
            RMS_FIELDS: () => import('./modules/rms/request_tree/fields'),
            RMS_STATUSES: () => import('./modules/rms/request_tree/statuses'),

            /* Chat. */
            CHAT_COMMON: () => import('./modules/chat/common'),
            CHAT_BASE: () => import('./modules/chat/base'),
            CHAT_MESSAGE: () => import('./modules/chat/message'),
            CHAT_SETTING: () => import('./modules/chat/setting'),
            CHAT_HISTORY: () => import('./modules/chat/history')
        }
    });

export default store;

我试过这样

import('./modules/chat/base.js')
      .then(module=> {
           store.registerModule('CHAT_BASE', module.default);
      });

但在这种情况下,即使不需要模块也会加载。在未加载 Vue 组件的页面上。

如何在一个文件中进行延迟加载?

标签: javascriptvue.jsecmascript-6vuex

解决方案


推荐阅读