在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 的错误处理文档不足。是否有人能让第四种选择起作用?这是否是理想的选择?还有其他选择吗?传统的方法是什么?
感谢您的时间!