Vuex州からVue Routerを使うには？私のコンポーネントで

Question

私が使用してきた：

this.$router.push({ name: 'home', params: { id: this.searchText }});

はルートを変更するには。私は今、メソッドを私のVuexアクションに移しました。もちろん、this.$routerは動作しません。 Vue.routerもありません。だから、どうやってVuex州からルータメソッドを呼び出すのですか？

Answer 1

vuex-router-syncはルータのインスタンスが必要なのでここで助けにならないと思います。

ので、これは理想的に感じることはありませんが、あなたが今、あなたのことができるようにすべきであるすなわち

global.router = new VueRouter({ 
    routes 
}) 

const app = new Vue({ 
    router 
    ... 

、WebPACKの内のグローバルとしてインスタンスを設定できますどこでも、あなたのアプリの中

---

から router.push({ name: 'home', params: { id: 1234 }})

上記の考えが気に入らない場合は、あなたの行動からプロミスを返すことができます。その後、アクションが正常に完了すると、私はそれが突然変異か何かを呼び出すと仮定し、あなたはresolveというPromiseを行うことができます。しかし、それが失敗し、リダイレクトが必要とする条件があれば、rejectプロミス。

あなたは、ルータを移動することができます。この方法は、あなたが渡されたと仮定すると、私はrootState.routerは、あなたの行動に利用可能になると信じすなわち

# vuex 
actions: { 
    foo: ({ commit }, payload) => 
    new Promise((resolve, reject) => { 
     if (payload.title) { 
     commit('updateTitle', payload.title) 
     resolve() 
     } else { 
     reject() 
     } 
    }) 

# component 
methods: { 
    updateFoo() { 
    this.$store.dispatch('foo', {}) 
     .then(response => { // success }) 
     .catch(response => { 
     // fail 
     this.$router.push({ name: 'home', params: { id: 1234 }}) 
     }) 

Answer 2

、単に拒否約束をキャッチし、VUE-ルータのプッシュを起動コンポーネントにリダイレクトメインVueコンストラクタのオプションとしてrouterを使用してください。

GuyCが言及したように、私はあなたが解決した後であなたの行動とルーティングから約束を返す方が良いかもしれないとも考えていました。簡単な言葉で：dispatch(YOUR_ACTION).then(router.push())。