vuex 모듈의 로드가 느리다

vuex 모듈의 로드가 느리다

vuex 모듈에서는 lazy loading을 사용하고 있습니다.

오래된 스토어\index.js는 다음과 같습니다.

import Vue from 'vue';
import Vuex from 'vuex';

import app from './modules/app';
import search from './modules/search';
import identity from './modules/identity';
import profil from './modules/profil';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    app,
    search,
    identity,
    profil,
  },
});

나는 이것을 하려고 했다.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store();

import('./modules/app').then((appModule) => {
  store.registerModule('app', appModule);
});

import('./modules/search').then((searchModule) => {
  store.registerModule('search', searchModule);
});

import('./modules/identity').then((identityModule) => {
  store.registerModule('identity', identityModule);
});

import('./modules/profil').then((profilModule) => {
  store.registerModule('profil', profilModule);
});

export default store;

그러나 현재 "TypeError: _vm.consultList is defined"와 같은 오류가 많이 발생하고 있습니다.consultList는 mapState 변수입니다.또한 mapActions Did I have somethody?

초기 vue 인스턴스에 스토어를 추가할 가능성이 높기 때문에 앱이 로드될 때 이러한 모듈이 모두 등록됩니다.vuex 모듈을 동적으로 로드하는 방법은 다음과 같습니다.

{
            path: "/orders/active",
            name: "active-orders",
            component: ActiveOrders,
            props: true,
            beforeEnter: (to, from, next) => {
                importOrdersState().then(() => {
                    next();
                });
            }
        },

다음으로 라우터 파일 내에도 다음과 같이 추가했습니다.

const importOrdersState = () =>
    import("@/store/orders").then(({ orders }) => {
        if (!store.state.orders) store.registerModule("orders", orders);
        else return;
    });

언급URL : https://stackoverflow.com/questions/49403721/lazy-loading-on-vuex-modules