切换项目后，默认选中第一个菜单项

问题

这两篇文章：

1. 若依菜单改造（二）：面包屑及顶部下拉框
2. 若依菜单改造（三）：根据不同项目，加载动态菜单

会产生bug：

1. 切换顶部项目下拉框时，projectId 改变了，但是 appId 没有改变，这会导致接口报错。

   

2. 页面加载来源应该有两个，而不是单个：projectId 和 appId 任意一个改变时，且都有值时，应该加载页面。

   

解决方案

针对 bug1：顶部项目下拉框切换时，默认选中左侧第一个动态菜单项。

注意：此处的数据加载顺序：

1. 切换顶部项目下拉框、跳转路由（改变 projectId）
2. 触发 App.vue 中 projectId全局监听器
3. 请求项目菜单路由(Vuex 中根据 projectId请求接口获得 appList，并生成对应的动态路由并渲染动态菜单)
   因此，应该在第3步之后，更改路由地址中的 appId 为 appList 中第一条数据的 appId
   因此，需要用到Vuex。

Vuex 代码：判断是否切换了顶部项目下拉框

渲染动态路由后，跳转到正确的路由

针对 bug2：深度监听由 projectId 和 appId 组成的对象。

注意：此处在组件内监听该对象，切换或刷新会多次触发监听事件，与预期不符。应该在 App.vue 中监听。【原因尚不明确】

因此，可利用 Vuex 实现。

Vuex 代码

App.vue 中监听对象

组件中加载页面

总结

1. 判断数据的加载顺序和时机；
2. 监听多个数据，用对象；
3. 在 Vuex 中跳转路由：先引入 router，再使用 router.push()；
4. router.app._route 可在 Vuex 中获取当前路由；
5. Vuex 中不同模块之间互相使用数据，可在 actions 中函数第一个参数中传入 rootState。
6. 注意：使用 commit('actionsName'， payload, {root: true}) 可调用另一个模块的 actions 函数，其中第一个参数为函数名，不是 stateName。

参考链接

1. vuex 中各个模块间互相调用 actions、mutations、state
2. 在vuex的store能否可以获取当前页面的路由？