How to get Vue Router Params in Vuex?

10
votes

I'm not able to use 

this.$route.params
route.params
router.params

how do I get the params of $route in my actions?

2
vue.jsvue-routervuex
with "vuex" do you mean inside store.js? – Fab
pass it down as an argument when calling this.$store.dispatch('whatever', {route: this.$route}) – Christophe
@Fabio yes inside of store.js in a module. – Philipp Mochine
@Christophe yes that is what I did, but wanted to know if it is possible to call it inside of store.js – Philipp Mochine
I am not sure if you can do that directly. It is definitely easier to test and is the recommended way to pass it down to the action instead of reaching out from the store to global variables. – Christophe

2 Answers

15
votes

in your actions.js or store.js

import router from 'path/to/router'
console.log(router.currentRoute.params)
0
votes

You can access the current route through the state or rootState with Vuex.

If the action is in a module, use rootState:

MY_ACTION: ({rootState}) => new Promise((resolve, reject) => {
    let params = rootState.route.params
    // do stuff
}

If the action is not in a module, use state:

MY_ACTION: ({state}) => new Promise((resolve, reject) => {
    let params = state.route.params
    // do stuff
}

See https://vuex.vuejs.org/api/#actions for more information on the context object.