突变后更改路由 (VueRouter) 的最佳实践 (Vuex)答案

【问题标题】：Best practice to change the route (VueRouter) after a mutation (Vuex)突变后更改路由 (VueRouter) 的最佳实践 (Vuex)
【发布时间】：2017-06-12 08:04:42
【问题描述】：

我搜索了很多，但没有明确的答案。基本上，在突变后自动更改路线的最佳做法应该是什么？

例如：我点击一个按钮来 login() -> 进行 http 调用的操作登录 -> 突变 LOGIN_SUCCESSFUL -> 我想将用户重定向到主页 $router.go()

我是不是应该把action封装在Promise中，然后监听结果从组件调用路由变化？
我应该直接从$store 做吗？
vuex-router-sync 有什么帮助吗？

非常感谢！

【问题讨论】：

标签： vuejs2 vue.js vue-router vuex

【解决方案1】：

这个问题的答案在 Vue 社区中似乎有些不清楚。

大多数人（包括我）会说，除了实际改变 store 之外，store 突变不应该有任何影响。因此，应避免直接在$store 中更改路线。

我非常喜欢您的第一个建议：将操作包装在一个 Promise 中，并在 Promise 解决后立即更改路由。

第三种解决方案是在您的组件中使用watch，以便在您的LOGGED_IN_USER 状态（或您所称的任何名称）发生更改后立即更改路由。虽然这种方法可以让你的动作和突变保持 100% 干净，但我发现它很快就会变得混乱。

因此，我建议走承诺路线。

【讨论】：

【解决方案2】：

在您的 app.vue 文件中放置一个事件监听器，然后通过您的突变函数发出一个事件。但我建议你将动作包装在一个承诺中是个好方法

App.vue：

import EventBus from './eventBus';

 methods: {   
    redirectURL(path) {
      this.$router.go(path)}
    },

 created() {
  EventBus.$on('redirect', this.redirectURL)
 }

突变：

import EventBus from './eventBus';

LOGIN_SUCCESSFUL() {
  state.blabla = "blabla";
  EventBus.$emit('redirect', '/dashboard')

}

【讨论】：

这个例子是一个合格的选项。它可能需要对使用的“事件总线”模式进行一些澄清。通常，这是一个由该“总线”上的所有发射器和侦听器共享的空 Vue 实例。导入的文件./eventBus 应该是这样的：import Vue from "vue"; export default new Vue();

【解决方案3】：

截至目前（2018 年年中）Vuex 的 API 支持订阅。使用它们可以在突变改变您的商店时得到通知，并根据需要调整路由器。

以下示例是放在 Vue 组件的created() 生命周期钩子中的摘录。它正在订阅 store 的突变，等待所需条件的第一个匹配以取消订阅并调整路由。

{
  ...
  created: function() {
    const unsubscribe = this.$store.subscribe( ( mutation, state ) => {
      if ( mutation.type === "name-of-your-mutation" && state.yourInfo === desiredValue ) {
        unsubscribe();
        this.$router.push( { name: "name-of-your-new-route" } );
      }
    } );
  },
  ...
}

【讨论】：