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

Obtain an indeterminate value from a variable

Error: The function nodemailer.createTransport is not defined or does not exist

Top method for triggering an action on the client-side during Sign In with the help of Redux, React, and NextAuth

Is there a way to streamline the process of dragging and dropping multiple files with C# selenium automation?

Extract information from one webpage, proceed to the following page, and repeat the process, utilizing JavaScript on the site

Exploring the limitations of middlewares in supporting independent routers

a guide on expanding a submenu in a shiny dashboard sidebar without using automated functions

The C# MVC Controller is having difficulty retrieving decimal or double values from an Ajax POST request

A TypeError was encountered: Attempting to read the 'substr' property of an undefined variable

What is the best way to use createElement in JavaScript to insert <p> and <span> elements within a <div>?

Having difficulty rendering JSON data on an HTML webpage

Tips for controlling numerous tabSlideOUt tabs on a single webpage

Steps to retain localStorage data while redirecting to another external webpage

In the Vercel production environment, when building Next.js getStaticPaths with URL parameters, the slashes are represented as %

Creating a form submission event through Asp.net code behind

JQuery form serialize not triggering in Internet Explorer

JQuery click event does not play nicely with Javascript array splice functionality

Easy ways to manipulate the style of array components in Vue.js

Leverage Arrays with Bootstrap SelectPicker in Javascript

Quantifying the passage of time for data entry