vuejs2 - 延迟加载 vuex 模块

Question

我正在尝试对我的 vuex 模块使用延迟加载，例如这篇文章:https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/

这是我的旧 store\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 undefined”，consultList 是一个 mapState 变量，我的 mapActions 也有同样的错误
我做错了什么吗？

Answer 1

所有这些模块都将在应用程序加载时注册，因为您很可能将商店添加到您的初始 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;
    });