How to use Vue Router from Vuex state?
Solution 1
I'm assuming vuex-router-sync won't help here as you need the router instance.
Therefore although this doesn't feel ideal you could set the instance as a global within webpack, i.e.
global.router = new VueRouter({
routes
})
const app = new Vue({
router
...
now you should be able to: router.push({ name: 'home', params: { id: 1234 }})
from anywhere within your app
As an alternative if you don't like the idea of the above you could return a Promise from your action. Then if the action completes successfully I assume it calls a mutation or something and you can resolve
the Promise. However if it fails and whatever condition the redirect needs is hit you reject
the Promise.
This way you can move the routers redirect into a component that simply catches the rejected Promise and fires the vue-router push, i.e.
# 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 }})
})
Solution 2
I a situation, I find myself to use .go
instead of .push
.
Sorry, no explanation about why, but in my case it worked. I leave this for future Googlers like me.
Related videos on Youtube
daninthemix
Updated on June 04, 2022Comments
-
daninthemix almost 2 years
In my components I've been using:
this.$router.push({ name: 'home', params: { id: this.searchText }});
To change route. I've now moved a method into my Vuex actions, and of course
this.$router
no longer works. Nor doesVue.router
. So, how do I call router methods from the Vuex state, please?-
Saurabh over 7 yearsDuplicate of stackoverflow.com/questions/40736799/…
-
-
daninthemix over 7 yearsYour first suggestion works - thanks. Why is it a bad idea to attach router to global? Similarly, I need global access to Vue-Resource - for some reason importing Vue and using Vue.http works fine (but is it optimal?) whereever I need Vue-Resource. Should I attach Vue-Resource to global as well? Regarding your second point, I will look into that (I don't much understand promises)
-
GuyC over 7 yearsI'm not really sure that it is a bad idea, it just feels a bit wrong - like this should be something built into vuex-router-sync. I've elaborated on the second idea just in case as I really like Promises! On your point with vue-resource, yeah that's fine -
Vue.http
is intended to be used this way, no need to make that global. -
daninthemix over 7 yearsI'm having trouble with my Promise syntax - would you mind taking a second to look? jsbin.com/webezelaki/edit?js
-
daninthemix over 7 yearsYes, I did ultimately go with the Promise approach that GuyC mentioned. How did you learn / how are we expected to know about rootState? Haven't seen that documented anywhere.
-
Chris over 7 years
-
Tomas Buteler over 6 yearsThere is no
router
in the rootState by default. Injecting it manually would also be overkill, as the router instance is mostly immutable, except for theroute
itself, which is part of the state if using vuex-router-sync.