如何在Nuxt store中捕获axios错误后跳转至错误页面

Nuxt框架的Store内部可直接访问全局实例的错误处理/路由能力，不需要额外引入第三方依赖，根据你使用的Nuxt版本选择对应实现即可： #

Nuxt2 实现 #

优先调用Nuxt自带的$nuxt.error()方法，自动加载layouts/error.vue作为错误页，同时保留错误上下文信息，符合框架原生设计规范，比手动跳转路由适配性更强（兼容SSR场景）。
修改后的action代码如下：

export const actions = {
  // 从action上下文解构app实例即可调用全局方法
  getData ({ commit, app }) {
    this.$axios('https://jsonplaceholder.typicode.com/todosx/1')
      .then((response) => {
        commit('SET_DATA', response.data)
      })
      .catch((err) => {
        // 传入错误状态码和提示信息，自动跳转到错误页
        app.$nuxt.error({
          statusCode: err.response?.status || 500,
          message: err.response?.data?.message || '数据请求失败'
        })
        // 若需要跳转到自定义路由的错误页，替换为下方代码即可
        // app.router.push('/custom-error')
      })
  }
}

Nuxt3 实现 #

Nuxt3优先使用showError方法触发全局错误流程，自动渲染错误页：

// 若使用Pinia作为状态管理，action写法如下
import { defineStore } from 'pinia'

export const useDataStore = defineStore('data', {
  state: () => ({
    data: {}
  }),
  actions: {
    async getData() {
      try {
        const response = await $fetch('https://jsonplaceholder.typicode.com/todosx/1')
        this.data = response
      } catch (err) {
        // 触发原生错误流程，自动渲染错误页
        throw showError({
          statusCode: err.response?.status || 500,
          statusMessage: err.message || '数据请求失败'
        })
        // 若需要跳转到自定义路由的错误页，替换为下方代码即可
        // const router = useRouter()
        // router.push('/custom-error')
      }
    }
  }
})

优化建议 #

如果项目内有大量类似的请求错误处理逻辑，可以直接在Axios全局响应拦截器中统一处理错误跳转，不需要在每个action的catch块重复编写逻辑，维护成本更低。

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