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

Question

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

Answer 1

视情况而定:-)

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

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

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

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

Answer 2

您可以 return Promise 从 action 并在组件的方法中处理它。

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"));
  }
},

Vue Router best practice: Redirect in store or component?