Updating route from action within Vuex Store

Question

Updating route from action within Vuex Store

Exploring ways to trigger a route change from the store. I attempted to import router directly into the store and use the following code:

LOG_OUT({commit}){
  commit('LOG_OUT__MUTATION');

  router.push({
   name: 'Login' 
  })
}

Unfortunately, this approach did not yield the desired result.

I am hesitant to handle route changes within components as it would demand authentication checks and route changes in every component, which feels overly burdensome.

Edit:

The LOG_OUT__MUTATION function clears the token stored in the state.

javascript vue.js vue-router vuex

Answer 1

Answer №1

I finally cracked the code.

End Result

To implement this in your store, all you need to do is import the router:

import router from '@/router/index'

actions: {

  LOG_OUT({commit}){
    commit('LOG_OUT__MUTATION');

    router.push({
      name:'Login'
    })
  }

}

From another section of my app, I imported the store and executed an action:

import Store from '@/store/store'

myFunction () {
  Store.dispatch('LOG_OUT');
}

Original Approach

This was how I applied Daksh Miglani's solution successfully. In my store.js file, here is what I had:

export const forceLogout = (commit) => {

  return new Promise((resolve, reject) => {
    commit('LOG_OUT__MUTATION');
    resolve();
  })

}

export default new Vuex.Store({
  actions,
  mutation
})

In another part of the app (helpers.js), I included the following:

import Store from '@/store/store'
import { forceLogout } from '@/store/store'
import router from '@/router/index'

forceLogout(Store.commit)
  .then(() => {
    debugger;
    router.push({
      name:'Login'
    })

  }).catch((error) => {
     console.log(error)
  })

Answer 2

I finally cracked the code.

End Result

To implement this in your store, all you need to do is import the router:

import router from '@/router/index'

actions: {

  LOG_OUT({commit}){
    commit('LOG_OUT__MUTATION');

    router.push({
      name:'Login'
    })
  }

}

From another section of my app, I imported the store and executed an action:

import Store from '@/store/store'

myFunction () {
  Store.dispatch('LOG_OUT');
}

Original Approach

This was how I applied Daksh Miglani's solution successfully. In my store.js file, here is what I had:

export const forceLogout = (commit) => {

  return new Promise((resolve, reject) => {
    commit('LOG_OUT__MUTATION');
    resolve();
  })

}

export default new Vuex.Store({
  actions,
  mutation
})

In another part of the app (helpers.js), I included the following:

import Store from '@/store/store'
import { forceLogout } from '@/store/store'
import router from '@/router/index'

forceLogout(Store.commit)
  .then(() => {
    debugger;
    router.push({
      name:'Login'
    })

  }).catch((error) => {
     console.log(error)
  })

Answer 3

Answer №2

Hey there, I've got a handy solution for you:

To start off, create a store commit function like the one below:

export const performLogout = ({commit}) => {
  return new Promise((resolve, reject) => {
    commit('LOG_OUT__MUTATION');
    // After clearing, resolve or reject the promise
    resolve();
  });
}

This function will generate a promise that can be utilized within your logout process, allowing you to first clear data before logging out.

Next, integrate this function into your logout feature:

...

  logout() {
    performLogout().then(() => {
      this.$router.push({
       name: 'Login' 
      })
    })
  }

...

Answer 4

Hey there, I've got a handy solution for you:

To start off, create a store commit function like the one below:

export const performLogout = ({commit}) => {
  return new Promise((resolve, reject) => {
    commit('LOG_OUT__MUTATION');
    // After clearing, resolve or reject the promise
    resolve();
  });
}

This function will generate a promise that can be utilized within your logout process, allowing you to first clear data before logging out.

Next, integrate this function into your logout feature:

...

  logout() {
    performLogout().then(() => {
      this.$router.push({
       name: 'Login' 
      })
    })
  }

...

Updating route from action within Vuex Store

Answer №1

Answer №2

Similar questions

AngularJS function orderBy reverses the array instead of sorting it

Opening a Text File via an ASPX Web Page

Arranging the elements in my footer for optimal display

Google Cloud's implementation of the "Vue+S3+Lambda" architecture

What is the best approach for creating a test that can simulate and manage errors during JSON parsing in a Node.js

Testing mutations in vuex modules can be a crucial aspect of ensuring the stability and

Enhance the performance of React code by refactoring it

Managing a promise and using async/await functions

appending a set of parameters to a website address

JavaScript's getElementById function may return null in certain cases

I am looking to transform CSV data into XLSX file format, upload it to AWS, and obtain the corresponding URL

Encountering problems with createMediaElementSource in TypeScript/React when using the Web Audio API

The Vue application combined with TypeScript is displaying an empty white screen

Ways to retrieve child state in React?

The URL provided for the Ajax HTTP request is not accurate

Why is the second row of inputs not displaying in Vue.js?

Moving an item to the top of an array in JavaScript/Vue.js: A simple guide

"Using the power of jQuery to efficiently bind events to elements through associative

Obtain a report using a variety of different conditions

I find the SetInterval loop to be quite perplexing