code splitting vuex application

Question

I have a vuex store and i'd like to apply code splitting on it.

Following this tutorial I tried this:

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

But the application fails :

webpack-internal:///24:739 [vuex] unknown getter: user

What am i doing wrong?

That error would appear if you were trying to access the user getter, which you haven't defined. Either by this.$store.getters.user or mapGetters(['user']). Do you access a getter like that anywhere else in your code? — thanksd
– thanksd, Commented Jul 27, 2017 at 13:20
@thanksd - I did define it, and it works if i don't use code splitting. I'm guessing it has something to do with the fact that it now loads the modules async. — Tomer
– Tomer, Commented Jul 27, 2017 at 13:55
Ahhh ok, you're defining it in your user module. I understand now. Yes, it's definitely because that module hasn't been loaded at the time you're trying to access it. Not sure what the solution is though... — thanksd
– thanksd, Commented Jul 27, 2017 at 14:00

Peter Wenström · Accepted Answer · 2017-08-05 17:23:42Z

1

If are using export default in your modules you need to access it through dot notation (something I read here under 4.2). So something like the below worked for me:

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

However, I had some issues with this approach. I often use the store on an initial page load and by then the module hasn't been loaded yet. So I register the part of the store that I need initially directly when declaring the store, like so:

import userModule from './modules/userModule'

Vue.use(Vuex);

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

Hope this helps!

answered Aug 5, 2017 at 17:23

Peter Wenström

711 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

code splitting vuex application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related