突然変異（Vuex）後に経路（VueRouter）を変更するベストプラクティス

Question

私は多くを検索しましたが、明確な答えはありません。基本的に突然変異後の経路を自動的に変更するにはどうすればよいでしょうか？

例：私は）（ログインする]ボタンをクリック - > [HTTP呼び出し可能アクションログイン - >変異LOGIN_SUCCESSFULは - >私はラップべきメインページ$router.go()

• にユーザーをリダイレクトしますPromiseのアクションを実行し、コンポーネントからルート変更を呼び出すために結果を聞くことができますか？

• $storeから直接行う必要がありますか？

• vuex-router-syncは何らかの形で役立ちますか？

ありがとうございます！

Answer 1

この質問に対する回答は、Vueコミュニティでは多少不明なようです。

ほとんどの人（私を含む）は、ストア突然変異が実際にストアを突然変異させるだけでは効果がないはずだと言います。したがって、$storeのルート変更を直接行うのは避けてください。

私はあなたの最初の提案で約束しました：約束が解決するとすぐに、あなたのコンポーネントを使ってからのルートを変更して、変更しています。

第3の解決方法は、LOGGED_IN_USER状態（またはそれが何であれ）が変更されるとすぐに経路を変更するために、コンポーネントにwatchを使用することです。このアプローチでは、あなたの行動や変異を100％きれいに保つことができますが、私はそれが非常に迅速に乱雑になることがわかりました。

その結果、私は約束ルートに行くことをお勧めします。

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

}