在 vuex 操作中调用时未定义路由器

Question

我在我的 Laravel 应用程序中使用 Vuex，由于某种原因，我无法在操作中执行 route.push。

我的 app.js： 需要('./bootstrap');

window.Vue = require('vue');
import VueRouter from 'vue-router'

import { routes } from './routes'

import store from './store/store'

Vue.use(VueRouter)

Vue.component('app-component', require('./App.vue').default);
Vue.component('appRegister', require('./components/User/Register.vue').default);
Vue.component('appLogin', require('./components/User/Login.vue').default);

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

const app = new Vue({
    el: '#app',
    router,
    store
});

在我的登录控制器中，我有一个名为 login 的方法，如下所示：

login(){
    this.$store.dispatch('login', this.user);
}

然后我的登录操作如下所示：

login: ({commit}, user) => {
    state.users.map(u => {
        if(u.email == user.email){
            router.push('/');
        } 
    });        
}

当我单击按钮时，我在控制台中看到以下错误：

[Vue warn]: Error in v-on handler: "ReferenceError: router is not defined"

注意，如果我在 Component 方法中执行以下操作，它可以正常工作：

login(){
    this.$router.push('/');
}

如何在 vuex 动作中进行路由推送？

我查看了这个答案here，但它似乎并没有解决我的问题。 我在 app.js 中导入了 vue-router

Answer 1

您必须在您的登录控制器中定义您的 vue 路由器或将您的路由器导入您的登录控制器。