vue.js - Unable to dispatch an action after updating the route using router.push

Question

When trying to dispatch an action after updating the route using this.$router, the action uses the previous route parameters instead of using the current route parameters.

Suppose I want to move to the /home and currently, I am on /about and in the store action called I want to access the route name, but after pushing the new route and then calling the action, it is using the previous route only and not the updated one.

this.$router.push('/home', this.$store.dispatch('called'))

Also, I tried using this.$router.push('/home').then(this.$store.dispatch('called')), but it gives undefined error.

Answer 1

You could pass the old and new queries from the method:

methods: {
  changeRoute() {
    const queryNew = { id: 1 };                              // Create new query
    const queryOld = { ...this.$route.query };               // Clone old query
    this.$router.push({ path: '/home', query: queryNew });   // Navigate
    this.$store.dispatch('called', { queryNew, queryOld });  // Call the action
  }
}

The action signature should look like:

actions: {
  called({ commit }, { queryNew, queryOld }) {
    console.log(queryNew, queryOld);
  }
}