title: Vuejs - vuex lazy load
body: <p>I have a fairly large VueJS SPA, and I just wanted to load the vuex modules on certain routes, using the lazy load.</p>
  
  <p>I was following this article to reproduce this - <a href="https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/" rel="nofollow noreferrer">https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/</a></p>
  
  <p>However this is giving me an error in vuex.</p>
  
  <p>Folder structure</p>
  
  <pre><code>root
    |- store
    | |- modules
    | | |- auth.js
    | | |- module2.js
    | |- store.js
    |- app.js
  </code></pre>
  
  <p>auth.js</p>
  
  <pre><code>const state = {
      var1: {},
      var2: false
  }
  
  const mutations = {
      'MUTATION_1'(state, obj) {
          // logic
      }
  }
  
  const actions = {
      action1({commit}) {
         // logic
      }
  }
  
  const getters = {
      var1: state =&gt; state.var1,
      var2: state =&gt; state.var2
  }
  
  export default {
      state,
      mutations,
      actions,
      getters
  }
  </code></pre>
  
  <p>store.js -</p>
  
  <pre><code>import Vue from 'vue';
  import Vuex from 'vuex';
  
  Vue.use(Vuex);
  const store = new Vuex.Store();
  
  import('./modules/auth.js').then(auth =&gt; {
      store.registerModule('/login', auth);
  });
  
  export default store;
  </code></pre>
  
  <p>app.js -</p>
  
  <pre><code>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
  });
  </code></pre>
  
  <p>error -</p>
  
  <pre><code>[vuex] unknown getter: var1
  </code></pre>
  
  <p>Any suggestion?</p>