Comment naviguer à l'aide de vue routeur de Vuex actions

Je suis entrain de créer une application web avec Vue 2.x et Vuex 2.x. Je suis aller chercher certaines informations à partir d'un emplacement distant via un appel http, je veux que si l'appel échoue, je doit rediriger vers une autre page.

GET_PETS: (state) => {
  return $http.get('pets/').then((response)=>{
      state.commit('SET_PETS', response.data)
    })
  },
  error => {this.$router.push({path:"/"}) }
  )
}

Mais this.$router.push({path:"/"}) me donne l'erreur suivante.

Non interceptée (promesse) TypeError: Cannot read property 'push' undefined

Comment cela peut-il être atteint.

Simulé JsFiddle: ici

c'est parce que vous l'utilisez à l'intérieur d'une flèche fonction qui traite de " il " comme un littéral. soit le convertir en une fonction régulière ou utiliser le corrigé ci-dessous...

OriginalL'auteur Saurabh | 2016-11-22

  1. 62

    import router from './router'

    et l'utilisation router.push

    Simple comme ça.

    OriginalL'auteur M U

  2. 7

    Il semble que vous n'êtes pas l'injection de votre routeur dans votre application, d'où qu'il soit 'undefined'

    Dans les versions précédentes de vue-routeur vous: Vue.use(VueRouter), 2.0, vous pouvez injecter le routeur à l'application comme ci-dessous:

    const routes = [
  { path: '/foo', component: Foo },
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router //inject the router
}).$mount('#app')

    ce doit ensuite les rendre disponibles comme this.$router tout au long de l'app

    Suivantes répondant à une question connexe: Comment utiliser la Vue Routeur de Vuex état? il semble que Vuex ne recevez pas le routeur instance à this.$router. Par conséquent, deux méthodes ont été proposées pour fournir l'accès au routeur à l'instance.

    La première est la plus directe qui consiste à fixer un webpack mondial de l'instance.

    La deuxième consiste à utiliser des Promesses de votre vuex d'action qui permettrait de vos composants pour l'utilisation de leur référence au routeur exemple à la suite d'actions Promesse de résoudre ou de rejeter.

    Cela devrait être la réponse spécifiquement pour vue 2

    OriginalL'auteur GuyC

  3. 6

    Cet exemple peut vous aider.

    main.js

    import Vue from "vue";
import VueRouter from "vue-router";

...

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'hash',
    base: "./",
    routes: [
        { path: "/", component: welcome},
        { path: "/welcome", component: welcome},

    ]
})

    actions.js

    import {router} from "../main.js"

export const someAction = ({commit}) => {

    router.push("/welcome");
}

    OriginalL'auteur bocai

  4. 4

    Je n'ai pas aimé garder mon application de l'emplacement d'état séparés du reste de mon état d'application dans le Magasin, et d'avoir à gérer à la fois un Routeur et un Magasin, j'ai donc créé un Vuex module qui gère l'emplacement de l'etat à l'intérieur de le Magasin.

    Maintenant je peux y accéder par l'envoi d'actions, comme toute autre modification de l'état:

    dispatch("router/push", {path: "/error"})

    Cela a l'avantage de faire les choses comme les pages d'animation des transitions plus faciles à manipuler.

    Il n'est pas difficile de rouler vos propres router module, mais vous pouvez aussi essayer le mien si tu veux:

    https://github.com/geekytime/vuex-router

    OriginalL'auteur Chris Jaynes

  5. 0

    Dans main.js (l'un, où l'on "installer" tous les modules et de créer Vue exemple, c'est à dire src/main.js):

    const vm = new Vue({
  el: '#app',
  router,
  store,
  apolloProvider,
  components: { App },
  template: '<App/>'
})

export { vm }

    C'est mon exemple, mais dans notre cas, le plus important ici est const vm et router

    Dans votre store:

    import { vm } from '@/main'

yourMutation (state, someRouteName) {
  vm.$router.push({name: someRouteName})
}

    P. S. à l'Aide de import { vm } from '@/main' on peut accéder à tout ce dont nous avons besoin dans Vuex, par exemple vm.$root qui est nécessaire pour certains composants de bootstrap-vue.

    P. P. S. Il semble que nous pouvons utiliser vm juste quand tout est chargé. En d'autres termes, nous ne pouvons pas utiliser vm à l'intérieur de someMutation dans le cas, si nous appelons someMutation à l'intérieur de mounted(), parce que mounted() arrive/se produit avant vm est créé.

    OriginalL'auteur TitanFighter