VueJS passing router to the store.js

Question

I have a code code snippet which works fine. header.vue

onLogout(){
      this.logout({ router: this.$router });
    }

store.js (actions)

logout({commit}, {router}){
  commit('clearAuthData')
  router.replace('/')
}

What this does is onLogout function clear the idToken and redirect user to the welcome screen. This works fine. But in the same header.vue componet I can't pass the router and read it inside the store.js. It says router is undefined. Why would this happen and how do I fix this? This is my code. header.vue

onLogin () {

        const formData = {
          email: this.email,
          password: this.password,
          returnSecureToken:true
        }
        this.$store.dispatch('login',{
         email: formData.email,
         password: formData.password
       },{ router: this.$router })
      console.log(formData)
    }

store.js (actions)

login({commit},{router},authData){
      axios.post('http://localhost/laravel_back/public/api/login',authData

      )
        .then(res => {
          console.log("Backend response",res)
          commit('authUser',{
            token:res.data[0].token,
            userName:res.data[1][0].fname,
            id:res.data[2][0].id,
            type:res.data.type
        })})
        .catch(error => console.log(error))
        router.replace('/student')

      }

Why isn't this work and is there more efficient way to pass router to the store.js other than passing with each and every time.

https://github.com/vuejs/vuex-router-sync – Jacob Goh Mar 13 '18 at 10:36 — Jacob Goh, Mar 13 '18 at 10:36

Hammerbot · Answer 1 · 2018-03-13T13:35:36.167

I think that a VueX action can only take one argument. So you would have to include the router inside those arguments:

this.$store.dispatch('login',{
    email: formData.email,
    password: formData.password,
    router: this.$router
})

login({commit}, options){
    return axios.post('http://localhost/laravel_back/public/api/login',{email: options.email, password: options.password}).then(res => {
        console.log("Backend response",res)
        commit('authUser', {
            token:res.data[0].token,
            userName:res.data[1][0].fname,
            id:res.data[2][0].id,
            type:res.data.type
        })
        options.router.replace('/student')
    }).catch(error => console.log(error))
}

But it is better to use @DobleL answer. A question had the same problem already: How to navigate using vue router from Vuex actions

With this, you won't have to pass the router each time you want to make a redirection.

What is vuex-router-sync I have seen it before also. But I can't understand that concept. — margherita pizza, Mar 13 '18 at 11:04
My bad, after reading the documentation, it's not meant for your usecase. You should directly import your router inside your store as mentioned in https://stackoverflow.com/questions/40736799/how-to-navigate-using-vue-router-from-vuex-actions — Hammerbot, Mar 13 '18 at 13:34

score 1 · Accepted Answer · answered Mar 13 '18 at 12:25

1

A better approach (for me) it's just importing the router object, example:

router.js

const router = new Router({
  mode: 'history',
  routes
})

export default router

actions.js

import router from '../my/path/to/router'

//whithin an action
router.push('/foo')

answered Mar 13 '18 at 12:25

DobleL

3,808
14
20

My router object is inside the main.js. my routues.js has some thing like this "export const routes = [ {path:'/findYourAccount',component:findYourAccount}, {path:'/',component:welcom...] – margherita pizza Mar 13 '18 at 13:06
so import it from main, there is no problem with that, i like to export the final object (VueRouter) or (Vuex.Store) on their respective files and in main only assembly the modules – DobleL Mar 13 '18 at 13:11

VueJS passing router to the store.js

2 Answers2