Vuejs - vuex 延迟加载答案

【问题标题】：Vuejs - vuex lazy loadVuejs - vuex 延迟加载
【发布时间】：2018-07-20 14:55:03
【问题描述】：

我有一个相当大的 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

auth.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
}

store.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;

app.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

有什么建议吗？

【问题讨论】：

标签： vue.js vuejs2 vue-router vuex

【解决方案1】：

store.registerModule('/login', auth);

上面的代码将auth 模块注册到login 的命名空间，所以为了从存储中访问它的状态、getter、突变和动作，你必须在所有这些前面加上路径login/。您收到错误是因为您可能在应该调用 store.getters['login/var1'] 时尝试了 store.getters.var1。

【讨论】：

【解决方案2】：

在加载登录模块之前调用 Getter。发生这种情况是因为import() 是异步函数，并且该模块是在创建计算观察者之后的某个时间注册的。 return store.state.login && store.getters['login/var1'] 内部组件计算 getter 将首先订阅您的组件到 store.state 更改，然后在登录模块加载并注册后 store.state 将更改并触发组件计算 getter 并自动订阅任何 state.login 更改

【讨论】：