코드 분할 vuex 응용 프로그램

코드 분할 vuex 응용 프로그램

저는 vuex 스토어를 가지고 있는데 코드 분할을 적용하고 싶습니다.

이 튜토리얼에 따라서, 이것을 시험해 보았다.

import Vuex from 'vuex'
import Vue from 'vue'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'

const store = new Vuex.Store({
  strict: debug,
  plugins: debug ? [createLogger] : [],
  state: {
    loading: false
  },
  mutations: {
    toggleLoading: (state) => {
      state.loading = !state.loading
    }
  },
  getters: {
    loading: state => state.loading
  },
  actions: {
    toggleLoading: ({commit}) => {
      commit('toggleLoading')
    }
  }
})

import('./modules/userModule').then(userModule => {
  store.registerModule('user', userModule)
})
import('./modules/tenantsModule').then(tenantsModule => {
  store.registerModule('tenants', tenantsModule)
})
import('./modules/updatesModule').then(updatesModule => {
  store.registerModule('updates', updatesModule)
})

export default store

그러나 응용 프로그램은 실패합니다.

webpack-internal://24:739 [vuex]알 수 없는 getter: 사용자

내가 뭘 잘못하고 있지?

가 사용하고 있는 경우export default모듈에서는 점 표기법(여기 4.2에서 읽은 내용)을 사용하여 액세스해야 합니다.그래서 다음과 같은 것이 나에게 효과가 있었다.

import('./modules/userModule').then(userModule => {
    store.registerModule('user', userModule.default)
})

다만, 이 어프로치에 몇 가지 문제가 있었습니다.저는 종종 초기 페이지 로딩 시 스토어를 이용하는데, 그때까지 모듈이 로딩되지 않았습니다.그래서 매장을 신고할 때 처음에 필요한 부분을 직접 등록합니다.

import userModule from './modules/userModule'

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {userModule}
})

이게 도움이 됐으면 좋겠네요!

언급URL : https://stackoverflow.com/questions/45351190/code-splitting-vuex-application