web-dev-qa-db-fra.com

Comment utiliser Vue Router à partir de l'état Vuex?

Dans mes composants, j'ai utilisé:

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

Pour changer de route. J'ai maintenant déplacé une méthode dans mes actions Vuex et, bien sûr, this.$router ne fonctionne plus. Vue.router non plus. Alors, comment appeler les méthodes de routeur à partir de l'état Vuex, s'il vous plaît?

vue.jsvue-routervuex
8
daninthemix

Je suppose que vuex-router-sync ne vous aidera pas ici car vous avez besoin de l'instance de routeur.

Par conséquent, bien que cela ne semble pas idéal, vous pouvez définir l’instance comme globale dans Webpack, c.-à-d.

global.router = new VueRouter({
  routes
})

const app = new Vue({
  router
  ...

maintenant, vous devriez pouvoir: router.Push({ name: 'home', params: { id: 1234 }}) de n’importe où dans votre application

Au lieu de cela, si vous n'aimez pas l'idée de ce qui précède, vous pouvez retourner une promesse de votre action. Ensuite, si l'action se termine avec succès, je suppose qu'elle appelle une mutation ou quelque chose comme ça et vous pouvez resolve la promesse. Cependant, si elle échoue et quelle que soit la condition dont la redirection a besoin, vous obtenez reject la promesse.

De cette façon, vous pouvez déplacer la redirection des routeurs vers un composant qui capture simplement la promesse rejetée et déclenche le Push vue-router, c'est-à-dire.

# 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 }})
      })
13
GuyC

Je crois que rootState.router sera disponible dans vos actions, en supposant que vous ayez passé router en option dans votre constructeur principal de Vue.

Comme GuyC l'a mentionné, je pensais également qu'il valait mieux que vous retourniez une promesse de votre action et de votre acheminement après la résolution. En termes simples: dispatch(YOUR_ACTION).then(router.Push()).

0
Chris