身份验证以不适当的方式工作Vue js

Question

我守卫着路线，它们取决于商店中的价值。

loginUser() { // i call this function when user press "Login"
this.$http.get('http://localhost:3000/users')
    .then(resp => {
        return resp.json()
    })
    .then(resp => resp.filter(item => item.email === this.email && item.password === this.password))
    .then(res => res.length > 0 ? (this.$router.push('/'), this.$store.commit('logUser')) : this.visible = true); // here i change value in the store
}

// Store
userLogged: false // state
mutations: {
    logUser(state) { // i call this function when loginUser() function calls
        state.userLogged = true
    }
}
// router index.js
{
    path: '/',
    name: 'Home',
    component: Home,
    beforeEnter: AuthGuard
}

export default function (to, from, next) { // this is AuthGuard function
    if (store.getters.getUser) { // get value from store
        next();
    } else {
        next('/login')
    }
}

// store
getters: { // get value
    getUser(state) {
        return state.userLogged
    }
}

这无法正常工作。我必须单击两次登录按钮，因为getUser（）获取状态并且logUser（）同时更改userLogged，即getUser（）返回false，当我第二次单击true时。我该如何解决？