Question

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

这是我的旧商店\ 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未定义＆＃34 ;, 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;
    });

在vuex模块上延迟加载

1 个答案: