Struggling a bit to set up error handling with vuex.(用vuex努力设置错误处理。)
There seems to be quite a few ways to do so and little documentation on proper error handling.(似乎有很多方法可以做到这一点，并且关于正确的错误处理的文档很少。) I've been experimenting with four alternatives, though I haven't found a satisfying solution yet.(尽管尚未找到令人满意的解决方案，但我一直在尝试四种替代方案。)
Alternative 1 - Catching and processing errors on component(备选方案1- 捕获和处理组件上的错误)
in pages/login.vue:(在 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
});
},
},
}
in store/auth.js:(在 store / auth.js中：)
export const actions = {
login({ commit }, { email, password }) {
return this.$axios.post('/api/login', {
email,
password,
}).then((res) => {
doSomething(res);
});
},
}
PROS(优点)
Hmm.(嗯)
CONS(缺点)
Errors not handled and stored in vuex.(错误未处理并存储在vuex中。)
Introduces lots of boilerplate code in component methods.(在组件方法中引入了许多样板代码。)
Alternative 2 - Catching and processing errors in vuex(备选方案2- vuex中的捕获和处理错误)
in pages/login.vue:(在 pages / login.vue中：)
export default {
methods: {
onLogin() {
this.$store.dispatch('auth/login', {
email: this.email,
password: this.password,
}).then(() => {
this.$router.push('/home');
});
},
},
}
in store/auth.js:(在 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);
});
},
}
PROS(优点)
Error object is accessible with vuex from any component(vuex可以从任何组件访问错误对象)
Could use a reactive error component in layout, which is revealed when the error state changes.(可以在布局中使用反应性错误组件，当错误状态更改时会显示出来。)
CONS(缺点)
I'm not sure if there is a way to track the source of the error, from which component it was thrown.(我不确定是否有办法跟踪错误的来源以及从哪个组件抛出错误。)
Alternative 3 - Catching errors using axios interceptors(方案3- 使用axios拦截器捕获错误)
in plugins/axios.js:(在 plugins / axios.js中：)
export default function({ $axios, store }) {
$axios.onError(error => {
store.dispatch('setError', error);
});
}
in pages/login.vue:(在 pages / login.vue中：)
export default {
methods: {
onLogin() {
this.$store.dispatch('auth/login', {
email: this.email,
password: this.password,
}).then(() => {
this.$router.push('/home');
});
},
},
}
in store/auth.js:(在 store / auth.js中：)
export const actions = {
login({ commit }, { email, password }) {
return this.$axios.post('/api/login', {
email,
password,
}).then((res) => {
doSomething(res);
});
},
}
PROS(优点)
Global error handling(全局错误处理)
No need to catch errors in either vuex or component(无需在vuex或组件中捕获错误)
No boiler-plate code(没有样板代码)
CONS(缺点)
All exceptions are unhandled, meaning non-axios errors are uncaught.(所有异常均未处理，这意味着未捕获非轴错误。)
Alternative 4 - Custom error plugin(备选方案4- 自定义错误插件)
I've been experimenting in implementing a custom plugin that catches all exceptions, but I'm not succeeding in making it work.(我一直在尝试实现一个捕获所有异常的自定义插件，但未能成功实现它。)
in plugins/catch.js:(在 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);
}
in pages/login.vue:(在 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');
}),
},
}
PROS(优点)
No boilerplate.(没有样板。)
All errors caught in plugin.(插件中捕获的所有错误。)
CONS(缺点)
I cannot make it work.(我无法使它工作。) :((:()
My impression is that there is a lack of documentation on error handling in vue/nuxt.(我的印象是，缺少有关vue / nuxt中错误处理的文档。) Could anyone get the fourth alternative to work?(有人可以选择第四个替代方法吗？) Would this be ideal?(这样理想吗？) Any other alternatives?(还有其他选择吗？) What is conventional?(什么是常规？)
Thank you for your time!(感谢您的时间！)
ask by nomadoda translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
