无法从 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 ]
});

应用的 bootstrap:

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

我的 FilterPlugin 应该触发 URL 解析：

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

您应该导入路由器同步。之后，您的商店和路线将正常运行。我通常在 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 同步之前加载完成。

当我将应用程序的 bootstrap 逻辑从 vuex 插件移动到 AppRootComponent 的挂载生命周期事件时，问题得到解决。

无法从 rootState 访问 Vuex 模块

Vuex module not accessible from rootState

vue.js

vue-router

vuex

vuejs2

vuex-modules