javascript - Push route from within action in Vuex Store - Stack Overflow

admin管理员组

文章数量:1321259

Trying to push route change from within the store. I tried importing router into the store itself and then doing something along the lines of:

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

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

... but that didn't work.

I also don't want to push a route change from directly with the ponents because it would mean I need to check authentication and push a route change in every ponent, which seems cumbersome to me.

Edited:

The LOG_OUT__MUTATION clears the token stored in the state.

Trying to push route change from within the store. I tried importing router into the store itself and then doing something along the lines of:

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

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

... but that didn't work.

I also don't want to push a route change from directly with the ponents because it would mean I need to check authentication and push a route change in every ponent, which seems cumbersome to me.

Edited:

The LOG_OUT__MUTATION clears the token stored in the state.

• javascript
• vue.js
• vue-router
• vuex

Share Improve this question Follow edited Mar 2, 2018 at 12:01 Modermo asked Mar 2, 2018 at 7:34 ModermoModermo 1,99222 gold badges3131 silver badges4848 bronze badges 4

• please explain and include the LOG_OUT__MUTATION code – Daksh M. Commented Mar 2, 2018 at 7:36
• Just edited my question :) it basically just clears the Auth token from the store. – Modermo Commented Mar 2, 2018 at 7:45
• correct me if im wrong, it is going to the login view page, before miting to the store right? that means router is pushing before the mit, hence this is an async problem. – Daksh M. Commented Mar 2, 2018 at 7:48
• No, it wipes the token from the store, THEN redirects to login. – Modermo Commented Mar 2, 2018 at 9:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I finally figured this out.

Final Implementation

In your store, simply import the router:

import router from '@/router/index'

actions: {

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

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

}

And then from another part of my app, I simply imported store and dispatched an action:

import Store from '@/store/store'

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

---

Initial Implementation

Here was my implementation of Daksh Miglani's solution (which works). In my store.js, I had:

export const forceLogout = (mit) => {

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

}

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

And then in another part of the app (helpers.js), I had:

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

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

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

Okay, I have a solution for you buddy:

So firstly you write a store mitting function like this:

export const mitLogout = ({mit}) => {
  return new Promise((resolve, reject) => {
    mit('LOG_OUT__MUTATION');
    // once you're done with your clearing, resolve or reject the promise
    resolve();
  });
}

This function will return a promise, that you can use in your logging out function which will at the end allow you to mit and clear first and then logout.

Then you use this function as your logout function:

...

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

...

本文标签： javascriptPush route from within action in Vuex StoreStack Overflow