Vue Router 最佳实践：在商店或组件中重定向？

【问题标题】：Vue Router best practice: Redirect in store or component?Vue Router 最佳实践：在商店或组件中重定向？
【发布时间】：2021-01-30 07:49:48
【问题描述】：

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

【问题讨论】：

【解决方案1】：

这取决于:-)

我会说，一般情况下，商店是独立于路由器的东西。而且我会尽量避免从状态接触路由器。

特别是在您使用 Nuxt（不是您的情况）的情况下，没有干净的方法来获取路由器实例（是的，您可以使用 this._vm 破解它）

无论如何，如果您有一个绑定到导航的操作，您可以出于实际原因违反规则。我仍然会尝试从商店中提取路由逻辑。（例如，从外部监听变化，可能是根组件，并从那里导航等）

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

【讨论】：

【解决方案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"));
  }
},

【讨论】：