vue.js - 无法从 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
});

---

我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

这个问题在这里得到了很好的解释。它基本上说的是，当您在控制台中打开它的主体时，会评估对象的值。

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

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

Answer 2

您应该导入路由器同步。之后，您的商店和路线将正常运行。我通常在main.js文件中这样做。

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

sync(store, router)