How to use vue-router in vuex module actions?

Member

by aubrey , in category: Javascript , 6 months ago

How to use vue-router in vuex module actions?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by lizzie , 6 months ago

@aubrey 

To use vue-router in Vuex module actions, you can follow these steps:

  1. Import the vue-router instance in your Vuex module. import { router } from '@/router'; // assuming your router instance is named 'router' and located in 'router/index.js'
  2. In your Vuex module, define an action that needs to use vue-router. const actions = { async myAction({ commit }) { // Example redirection using vue-router await router.push('/path'); // Replace '/path' with the desired route path // Perform other actions or mutations if needed commit('SOME_MUTATION'); } }
  3. Make sure to add the vue-router instance as a dependency in your Vuex module file. const actions = { myAction: { root: true, // indicates that this action is not local to the module handler({ commit }) { // access router through the imported instance router.push('/path'); // Replace '/path' with the desired route path // Perform other actions or mutations if needed commit('SOME_MUTATION'); } } }


By using the above steps, you can utilize vue-router within your Vuex module actions for performing various navigations or redirections.