Comment naviguer en utilisant le routeur vue à partir des actions Vuex
je crée une application web avec Vue 2.x et Vuex 2.x. Je récupère des informations à partir d'un emplacement distant via un appel http, je veux que si cet appel échoue, je devrais 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.
Uncaught (promesse) TypeError: Cannot read property 'push' undefined
comment y parvenir.
jsfiddle simulé: ici
4 réponses
import router from './router'
et utiliser router.push
Simple comme ça.
on dirait que vous n'injectez pas votre routeur dans votre application, donc il est "non défini"
dans les versions précédentes de vue-routeur vous voulez: Vue.use(VueRouter) , avec 2.0 vous pouvez injecter le routeur dans 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')
cela devrait ensuite le rendre disponible en tant que this.$router tout au long de l'application
suite à la réponse à une question connexe: comment utiliser le routeur Vue de Vuex état? il semble que Vuex ne recevra pas l'instance du routeur à this.$router . Par conséquent, deux méthodes ont été suggérées pour fournir l'accès à l'instance du routeur.
le premier est plus direct, ce qui implique de configurer un webpack global à l'instance.
la seconde consiste à utiliser des promesses avec votre action vuex qui permettraient à vos composants d'utiliser leur référence à l'instance du routeur suivant les actions promises resolving / rejeter.
Cet exemple peut vous aider.
principal.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");
}
Je n'ai pas aimé garder l'état de localisation de mon application séparé du reste de mon état app dans le magasin, et d'avoir à gérer à la fois un routeur et un magasin, donc j'ai créé un module Vuex qui gère l'état de localisation à l'intérieur de le magasin.
maintenant je peux naviguer en envoyant des actions, comme n'importe quel autre changement d'état:
dispatch("router/push", {path: "/error"})
cela a l'avantage supplémentaire de rendre les choses comme les transitions de page animées plus faciles à gérer.
il n'est pas difficile de lancer votre propre module router , mais vous pouvez également essayer le mien si vous voulez: