Vuex module not accessible from rootState

Question

I needed to get route's query parameters inside Vuex in order to preload filter settings and update the state of the application. To make this possible I installed vuex-router-sync.

Next step was to synchronize the Vuex and VueRouter.

Router:

Vue.use(VueRouter);
export default new VueRouter({ mode: 'history' });

---

Store:

Vue.use(Vuex);
export default new Vuex.Store({
    modules: { filters: FiltersModule },
    plugins: [ FiltersPlugin ]
});

---

App's bootstrap:

const unsync = sync(store, router);
new Vue({
    el: '#restaurant-admin-app',
    components: {
        'App': AppComponent,
        'filters': FilterComponent,
        'orders-table': OrdersTableComponent
    },
    store,
    router
});

---

My FilterPlugin that should trigger the URL parsing:

export default store => {
    store.dispatch('filters/parseURLFilterSettings');
}

---

And now, the funny part, here's the URL parsing action:

parseURLFilterSettings: ({ state, commit, rootState }) {
    console.log('RootState:',                rootState);
    console.log('Route module (incorrect):', rootState.route);
    console.log('Filters module (correct):', rootState.filters);
    console.log('Object\'s keys:',           Object.keys(rootState));
}

What am I doing wrong? I thought it might be something with syncing, but at the end the console.log shows clearly that the route Object is there (and it's not empty), but somehow when I access it, it's undefined. Thank you in advance.

Answer 1

The problem was very well explained here. What it basically says is that the object's value is evaluated when you open it's body in the console.

The problem was I didn't have the route module loaded yet, because I was trying to dispatch an action from a vuex plugin which seems to load before the vuex-router-sync's syncing was done.

The problem was solved when I moved application's bootstrap logic from vuex plugins into the AppRootComponent's mount lifecycle event.