使用 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 访问
- 可以在布局中使用 react 性错误组件,当错误状态发生变化时会显示出来。
缺点
- 我不确定是否有一种方法可以跟踪错误的来源,即错误是从哪个组件抛出的。
备选方案 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 中缺少关于错误处理的文档。谁能得到第四种工作选择?这会是理想的吗?还有其他选择吗?什么是常规?
感谢您的宝贵时间!
最佳答案
选项 #4 不起作用的原因是你返回了一个永远不会执行的函数:
function catchPlugin(outerFunction) {
return function async innerFunction(args) {
try {
const data = await outerFunction(args);
return { data }
} catch (error) {
return { error }
}
}
}
用法:
const execute = catchPlugin((args) => {
// do something
})
execute('myArgument');
如您所见,您还需要执行内部函数,以使您的示例工作:
onLogin: this.$catch(async function () {
await this.$store.dispatch('auth/login', { email: this.email, password: this.password });
this.$router.push('/home');
})(), // mind the () :-)
但是...我相信在组件中处理错误并不是一件坏事,因为这与您的 View 组件紧密耦合。例如,考虑一个登录组件,我们现在看到的是一个全局错误处理程序 (toastr),如果用户名/密码不正确,它会显示提示信息。根据我的经验,这不是最好的行为,它是一个很好的起点,但更好的做法是在组件附近添加错误消息,显示究竟出了什么问题。这意味着您将始终必须在组件本身中添加错误处理(与 UI 相关)。
我们公司的同事也在为同一产品工作而苦苦挣扎。一种是添加错误处理,另一种不是。在我看来,唯一的解决方案是教育开发人员始终添加正确的错误处理。 async/await
的语法还不错:
methods: {
async login (email, password) {
try {
await this.$store.dispatch('auth/login', { email, password })
// do something after login
} catch (error) {
// handle error
}
}
}
关于您的 con
的最后一件事:未在 vuex 中处理和存储错误。。为什么这是一个骗局?您是否需要在全局范围内提供错误信息?我看到的很多是人们在 vuex
中放置了很多仅在组件本身中使用的无用状态。拥有本地组件状态也不错。既然是关于登录的,这个错误应该只有登录组件才知道。
关于javascript - Vue.js:Nuxt 错误处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51247371/