Vue.js中在Vuex action内调用router.push跳转路由出现无限等待如何解决

问题根因 #

你遇到的高内存、高CPU无响应问题本质是无限死循环触发，router.push跳首页的操作和你现有业务逻辑形成了闭环：跳首页后触发的逻辑反过来又重新调用了当前Vuex action，再次触发路由跳转，反复执行导致资源耗尽。

解决方案 #

• 首先加路由状态判断，避免重复跳转首页
  只有当前页面不是首页时才执行跳转操作，直接阻断循环，修改你的action代码如下：

  impostaSelezionabili: ({ commit,dispatch }, payload) => {
      commit("associazioniSelezionabiliImpostate", payload)
      const prefe = payload.prefe
      if (payload.associazioni.length == 1) {
          commit("associazioneScelta", payload.associazioni[0].codAssociazione)
          dispatch("toolbarManager/setToolbarVisibility", true, {root: true})
          // 加当前路由判断，避免重复跳转
          if (router.currentRoute.path !== '/') {
              router.push({ path: '/' })
          }
      }
  },
  

• 排查首页/路由守卫的触发逻辑
  检查HomePage组件的created/mounted钩子、全局router.beforeEach路由守卫，是否存在调用impostaSelezionabiliaction的逻辑：比如首页加载时会拉取关联数据，拉取完成后刚好命中associazioni.length == 1的判断条件，再次触发跳转，形成闭环。
• 排查Vuex响应式监听逻辑
  检查是否有全局watch、Vuex subscribe逻辑在监听associazioniSelezionabiliImpostate对应的state值，一旦值变化就重新触发impostaSelezionabiliaction，导致跳转逻辑反复执行。
• 异步延迟跳转避免和状态更新冲突
  如果是路由跳转和当前Vuex状态更新逻辑冲突导致的死循环，可以把跳转逻辑放在nextTick中异步执行：

  // 先导入Vue的nextTick
  import { nextTick } from 'vue'
  
  // action修改为async
  impostaSelezionabili: async ({ commit,dispatch }, payload) => {
      commit("associazioniSelezionabiliImpostate", payload)
      const prefe = payload.prefe
      if (payload.associazioni.length == 1) {
          commit("associazioneScelta", payload.associazioni[0].codAssociazione)
          await dispatch("toolbarManager/setToolbarVisibility", true, {root: true})
          await nextTick()
          if (router.currentRoute.path !== '/') {
              router.push({ path: '/' })
          }
      }
  },
  

内容的提问来源于stack exchange，提问作者loreeemartiii