Question

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

Ex：我点击按钮登录（） - ＆gt;进行http呼叫的动作登录 - ＆gt;变异LOGIN_SUCCESSFUL - ＆gt;我想将用户重定向到主页$router.go()

我应该在Promise中包装动作，然后听取结果从组件调用路由更改吗？
我应该直接从$store？
vuex-router-sync会有什么帮助吗？

非常感谢！

Answer 1

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

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

我非常喜欢你的第一个建议：在承诺中包含行动，并在承诺解决后立即改变你的组件的路线。

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

结果，我建议去承诺路线。

Answer 2

在app.vue文件上放置一个事件监听器，然后通过变异函数发出en事件。但我建议你把这个动作包装成一个好的方式

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')

}

Answer 3

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

以下示例摘录了Vue组件的created()生命周期挂钩中的内容。它正在订阅商店的突变，等待所需条件的第一个匹配项取消订阅并调整路线。

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

突变后改变路线（VueRouter）的最佳做法（Vuex）

3 个答案: