使用 vuex 设置错误处理有点困难。似乎有很多方法可以做到这一点，但关于正确错误处理的文档却很少。我一直在尝试四种替代方案，但还没有找到令人满意的解决方案。

替代方案 1 - 在组件上捕获和处理错误

在 pages/login.vue 中：

export default {
    methods: {
        onLogin() {
            this.$store.dispatch('auth/login', {
                email: this.email,
                password: this.password,
            }).then(() => {
                this.$router.push('/home');
            }).catch((error) {
                // handle error in component
            });
        },
    },
}

在 store/auth.js 中：

export const actions = {
    login({ commit }, { email, password }) {
        return this.$axios.post('/api/login', {
            email,
            password,
        }).then((res) => {
            doSomething(res);
        });
    },
}

优点

• 嗯。

缺点

• 未在 vuex 中处理和存储错误。
• 在组件方法中引入大量样板代码。

替代方案 2 - 捕获并在 vuex 中处理错误

在 pages/login.vue 中：

export default {
    methods: {
        onLogin() {
            this.$store.dispatch('auth/login', {
                email: this.email,
                password: this.password,
            }).then(() => {
                this.$router.push('/home');
            });
        },
    },
}

在 store/auth.js 中：

export const actions = {
    login({ commit }, { email, password }) {
        return this.$axios.post('/api/login', {
            email,
            password,
        }).then((res) => {
            doSomething(res);
        }).catch((error) => {
            // store error in application state
            commit('SET_ERROR', error);
        });
    },
}

优点

• 可以使用 vuex 从任何组件访问错误对象
• 可以在布局中使用反应式错误组件，当错误状态发生变化时会显示该组件。

缺点

• 我不确定是否有办法跟踪错误的来源，即从哪个组件抛出错误。

替代方案 3 - 使用 axios 捕获错误拦截器

在 plugins/axios.js 中：

export default function({ $axios, store }) {
    $axios.onError(error => {
        store.dispatch('setError', error);
    });
}

在 pages/login.vue 中：

export default {
    methods: {
        onLogin() {
            this.$store.dispatch('auth/login', {
                email: this.email,
                password: this.password,
            }).then(() => {
                this.$router.push('/home');
            });
        },
    },
}

在 store/auth.js 中：

export const actions = {
    login({ commit }, { email, password }) {
        return this.$axios.post('/api/login', {
            email,
            password,
        }).then((res) => {
            doSomething(res);
        });
    },
}

优点

• 全局错误处理
• 无需在 vuex 或组件中捕获错误
• 没有样板代码

缺点

• 所有异常均未处理，这意味着未捕获非 axios 错误。

替代方案4 - 自定义错误插件

我一直在尝试实现一个捕获所有异常的自定义插件，但我无法让它工作。

在 plugins/catch.js 中：

export default (ctx, inject) => {
    const catchPlugin = function (func) {
        return async function (args) {
            try {
                await func(args)
            } catch (e) {
                return console.error(e)
            }
        }
    };
    ctx.$catch = catchPlugin;
    inject('catch', catchPlugin);
}

在 pages/login.vue 中：

export default {
    methods: {
        onLogin: this.$catch(async function () {
            await this.$store.dispatch('auth/login', { email: this.email, password: this.password });
            this.$router.push('/home');
        }),
    },
}

优点

• 没有样板。
• 插件中捕获所有错误。

缺点

• 我无法让它工作。 :(

我的印象是，vue/nuxt 中缺少有关错误处理的文档。有人能让第四种替代方案奏效吗？这是理想的吗？还有其他替代方案吗？什么是常规的？

感谢您的时间！