Vue.js VueJS将路由器传递到store.js

我有一个代码片段，它工作得很好。 标题.vue

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

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（操作）

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

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

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（操作）

---

为什么这不起作用？除了每次传递路由器外，还有没有更有效的方法将路由器传递到store.js。

我认为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。一个问题已经有了相同的问题：

---

这样，您就不必在每次进行重定向时都通过路由器。

我认为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。一个问题已经有了相同的问题：

这样，您就不必在每次进行重定向时都通过路由器。

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

router.js

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

export default router

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

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

actions.js

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

export default router

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

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

一个更好的方法（对我来说）就是导入router对象，例如：

router.js

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

export default router

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

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

actions.js

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

export default router

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

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

---

什么是vuex路由器同步？我以前也见过。但是我不能理解这个概念。我的错是，在阅读了文档之后，它并不适合您的用例。您应该直接将路由器导入到存储中，正如我以前看到的vuex路由器同步中所述。但是我不能理解这个概念。我的错是，在阅读了文档之后，它并不适合您的用例。你应该直接在你的商店里导入你的路由器，就像我的路由器对象在main.js里面提到的那样。我的routues.js有一些类似于“export const routes=[{path:'/findYourAccount'，component:findYourAccount}，{path:'/'，component:welcom…]的东西，所以从main导入它，这没有问题，我喜欢导出最终的对象（VueRouter）或（Vuex.Store）在各自的文件和main-only程序集中，modulesMy-router对象位于main.js中。my-routues.js有类似这样的东西“export-const-routes=[{path:'/findYourAccount'，component:findYourAccount}，{path:'/'，component:welcom…]，所以从main导入它，这没有问题，我喜欢导出最终的对象（VueRouter）或（Vuex.Store）在其各自的文件上，并且主要仅组装模块