VueJS 将路由器传递给 store.js

Question

我有一个代码片段可以正常工作。 header.vue

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

store.js（操作数）

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

它所做的是 onLogout 函数清除 idToken 并将用户重定向到欢迎屏幕。这很好用。但是在同一个header.vue组件中，我无法通过路由器并在store.js中读取它。它说路由器未定义。为什么会发生这种情况，我该如何解决？这是我的代码。 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（操作数）

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')

      }

为什么这行不通，除了每次都通过之外，还有更有效的方法将路由器传递给 store.js。

Answer 1

我认为一个 VueX 动作只能接受一个参数。所以你必须在这些参数中包含路由器：

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))
}

不过还是用@DobleL回答比较好。一个问题已经有同样的问题：

有了这个，您就不必每次都通过路由器进行重定向了。

Answer 2

更好的方法（对我来说）它只是导入路由器对象，例如：

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')

VueJS 将路由器传递给 store.js

VueJS passing router to the store.js

vue.js

vue-router

vuejs2