无法从rootState访问Vuex模块

Question

我需要在Vuex中获取路由的查询参数，以便预加载过滤器设置并更新应用程序的状态。为此，我安装了vuex-router-sync。

下一步是同步Vuex和VueRouter。

路由器：

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

---

商店：

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

---

应用的引导程序：

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

---

应该触发URL解析的我的FilterPlugin：

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

---

现在，有趣的是，这是URL解析操作：

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));
}

我在做什么错？我以为可能与同步有关，但是最后console.log清楚地显示了路由对象存在（并且它不是空的），但是当我访问它时，它是undefined。预先谢谢你。

Answer 1

您应该导入router-sync。之后，您的商店和路线将正常运行。我通常在main.js文件中进行此操作。

import router from './router'
import store from './store'
import { sync } from 'vuex-router-sync'

sync(store, router)

Answer 2

问题here得到了很好的解释。它的基本含义是，在控制台中打开对象的主体时会评估该对象的值。

问题是我尚未加载route模块，因为我试图从vuex插件调度一个动作，该插件似乎在vuex-router-sync同步完成之前已加载。

当我将应用程序的引导逻辑从vuex插件移到AppRootComponent的mount生命周期事件中时，问题就解决了。