Wie verwende ich Vue Router vom Vuex-Zustand?

Question

In meinen Komponenten Ich habe mit:

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

Route zu ändern. Ich habe jetzt eine Methode in meine Vuex-Aktionen verschoben, und this.$router funktioniert natürlich nicht mehr. Noch tut Vue.router. Also, wie rufe ich Router-Methoden aus dem Vuex-Zustand, bitte?

Answer 1

Ich nehme an, vuex-router-sync wird hier nicht helfen, wie Sie die Router-Instanz benötigen.

Deshalb, obwohl dies nicht ideal fühlt man die Instanz als globale innerhalb webpack einstellen könnte, das heißt

global.router = new VueRouter({ 
    routes 
}) 

const app = new Vue({ 
    router 
    ... 

jetzt sollten Sie in der Lage: router.push({ name: 'home', params: { id: 1234 }}) von überall in Ihrer App

---

Als eine Alternative, wenn Sie die Idee des oben genannten nicht mögen, könnten Sie ein Versprechen von Ihrer Aktion zurückgeben. Dann, wenn die Aktion erfolgreich abgeschlossen wird, nehme ich an, es ruft eine Mutation oder etwas und Sie können die Promise resolve. Wenn es jedoch fehlschlägt und die Bedingung, die die Weiterleitung braucht, ist Sie reject die Promise.

Auf diese Weise können die Router umzuleiten in eine Komponente bewegen kann, die einfach die abgelehnte Versprechen fängt und feuert die vue-Router schieben, dh

# 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

Ich glaube rootState.router in Ihre Aktionen zur Verfügung stehen wird, vorausgesetzt, Sie übergeben router als eine Option in Ihrem Haupt-Vue-Konstruktor.

Wie GuyC erwähnte, dachte ich auch, dass es besser wäre, ein Versprechen von Ihrer Aktion und dem Routing zurückzugeben, nachdem es verrechnet wurde. In einfachen Worten: dispatch(YOUR_ACTION).then(router.push()).