代码之家  ›  专栏  ›  技术社区  ›  martinho

Vuejs-Vuex延迟加载

  •  2
  • martinho  · 技术社区  · 6 年前

    我有一个相当大的VueJS SPA,我只是想使用懒惰的负载在某些路由上加载Vuex模块。

    我是为了复制这篇文章- https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/

    但是这给了我一个Vuex错误。

    文件夹结构

    root
      |- store
      | |- modules
      | | |- auth.js
      | | |- module2.js
      | |- store.js
      |- app.js
    

    认证JS

    const state = {
        var1: {},
        var2: false
    }
    
    const mutations = {
        'MUTATION_1'(state, obj) {
            // logic
        }
    }
    
    const actions = {
        action1({commit}) {
           // logic
        }
    }
    
    const getters = {
        var1: state => state.var1,
        var2: state => state.var2
    }
    
    export default {
        state,
        mutations,
        actions,
        getters
    }
    

    商店.js-

    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    const store = new Vuex.Store();
    
    import('./modules/auth.js').then(auth => {
        store.registerModule('/login', auth);
    });
    
    export default store;
    

    应用程序JS-

    import Vue from 'vue';
    import store from './store/store';
    import VueRouter from 'vue-router';
    import { routes } from './routes/routes';
    
    // vue-router config
    Vue.use(VueRouter);
    
    const router = new VueRouter({
        mode: 'history',
        routes
    });
    
    const app = new Vue({
        el: '#app',
        store,
        router
    });
    

    错误-

    [vuex] unknown getter: var1
    

    有什么建议吗?

    1 回复  |  直到 6 年前
        1
  •  2
  •   pretzelhammer Paras Bhattrai    6 年前
    store.registerModule('/login', auth);
    

    上述代码记录了 auth 命名空间为的模块 login 因此,为了从存储中访问它的状态、getter、突变和操作,您必须在所有这些操作之前加上路径前缀。 login/ . 你得到错误是因为你可能尝试过 store.getters.var1 你应该什么时候打电话来 store.getters['login/var1'] .