Vue路由器最佳实践:在商店或组件中重定向

Question

假设您的Vuex商店中有类似signOut()的操作，并且您希望在用户按下相应按钮后重定向到主页。我应该在按钮所在的组件中还是在商店中进行重定向？

Answer 1

这取决于：-(

我想说，在一般情况下，存储是独立于路由器的东西。而且我会尽量避免从国家接触路由器。

特别是在你使用Nuxt的情况下(这不是你的情况(，没有干净的方法来获得路由器实例(是的，你可以使用这个.vm破解它(

无论如何，如果你有一个绑定到导航的动作，你可以出于实际原因打破规则。尽管如此，我还是会尝试从商店中提取路由逻辑。(例如，倾听外部的变化，可能是根组件，并从那里导航等(

这真的取决于你的情况，对此没有100%的明确答案。

Answer 2

您可以从操作返回Promise，并在组件的方法中处理它。

Vuex商店：

const actions = {
signOut({ commit }) {
return new Promise(resolve => {
commit("SET_CREDENTIALS", null);
resolve();
})
}
};

组件的方法部分：

methods: {
signOut() {
this.$store.dispatch("signOut")
.then(() => this.$router.push("/home"));
}
},