Vuejs - vuex 지연 부하

Vuejs - vuex 지연 부하

저는 꽤 큰 VueJSPA를 가지고 있는데, 단지 느린 부하를 사용하여 특정 루트에 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.displays(인증)

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

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

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

제안해 주실 수 있나요?

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

위의 코드는auth네임스페이스를 가진 모듈login따라서 스토어에서 상태, 게터, 돌연변이 및 동작에 액세스하려면 모든 것 앞에 경로를 붙여야 합니다.login/에러가 난 것은 아마 시도했을 것이기 때문입니다.store.getters.var1전화했어야 할 때store.getters['login/var1'].

로그인 모듈이 로드되기 전에 Getter가 호출됩니다.이 일이 발생하는 이유는import()는 비동기 함수이며 모듈은 계산된 워처가 생성된 직후에 등록되었습니다. return store.state.login && store.getters['login/var1']내부 컴포넌트 계산 getter가 컴포넌트를 서브스크라이브합니다.store.state변경 후 로그인 모듈 로드 및 등록 후store.state컴포넌트 계산게터를 변경 및 트리거하여 임의의 컴포넌트에 자동으로 서브스크라이브합니다.state.login변화들

언급URL : https://stackoverflow.com/questions/51445256/vuejs-vuex-lazy-load