在Axios响应中通过Vuex Action修改State时Commit不生效

看起来你遇到的问题挺让人困惑的——Action里Axios请求前的commit能正常更新状态，但请求完成后的commit完全没反应，明明控制台还能正常打印响应数据。我来帮你一步步排查可能的原因：

第一步：确认Mutation是否真的被触发 #

首先咱们得搞清楚第二个commit('setDays', ...)到底有没有调用到Mutation。给你的Mutation加个日志，验证执行情况：

mutations: { 
  setDays (state, payload) { 
    console.log('✅ SetDays mutation触发，payload:', payload)
    state.savedDays = payload 
  } 
}

重新触发Action后看控制台：

• 如果两次日志都出现（一次是"crackers"，一次是响应数据）：说明Mutation确实执行了，状态已经被修改，问题大概率出在Vue DevTools缓存或者组件没有正确响应状态变化。
  • 解决DevTools显示问题：关闭DevTools面板再重新打开，或者刷新页面后重试，有时候DevTools会因为异步更新延迟显示最新状态。
  • 检查组件响应逻辑：确保组件是通过computed属性获取state的（不要直接在模板写$store.state.savedDays，也不要在created里把state赋值给组件data）：

    computed: {
      savedDays () {
        return this.$store.state.savedDays
      }
    }
    

• 如果只有第一次"crackers"的日志：说明第二个commit根本没执行到，但你说console.log(response.data)能打印，这时候要检查：
  • 有没有Axios响应拦截器？比如拦截器里有没有抛出错误或者终止Promise链？给Action加个catch捕获隐藏错误：

    async getDays ({commit}) {
      commit('setDays', "crackers")
      try {
        const response = await axios.get('/days/byType/30/1')
        console.log("Response:", response.data)
        commit('setDays', response.data)
      } catch (err) {
        console.error('❌ 请求出错了:', err)
      }
    }
    

第二步：检查是否有其他代码覆盖了状态 #

有没有可能在Axios请求的这段时间里，其他Action或Mutation也在修改savedDays？比如定时任务、其他用户操作触发了状态修改，把第二个commit的结果覆盖了？

可以在第二个commit后立刻打印当前state的值（解构Action参数加上state）：

async getDays ({commit, state}) {
  commit('setDays', "crackers")
  const response = await axios.get('/days/byType/30/1')
  console.log("Response:", response.data)
  commit('setDays', response.data)
  console.log('🔍 当前state.savedDays:', state.savedDays)
}

如果这里打印的是响应数据，但DevTools显示的还是"crackers"，那肯定是DevTools的缓存问题。

第三步：排除版本兼容性问题 #

如果你用的是Vue 3，确保Vuex版本是4.x；Vue 2对应Vuex 3.x。版本不匹配可能会导致一些奇怪的异步更新问题。可以查看package.json里的依赖版本，或者运行npm list vuex确认。

最后一招：用模拟异步操作测试 #

把Axios请求换成模拟的异步操作，看看commit是否生效：

async getDays ({commit}) {
  commit('setDays', "crackers")
  // 模拟1秒延迟的异步操作
  await new Promise(resolve => setTimeout(resolve, 1000))
  commit('setDays', "异步后的测试值")
  console.log('异步后的commit执行了')
}

如果这个模拟的异步commit能生效，那说明问题出在Axios请求本身（比如接口返回数据异常、Promise状态异常），而不是Vuex的逻辑问题。

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