Vue Router access individual getters from Vuex

I'm trying to access the currently authenticated user in my Vuex store inside my router.js file

{
  path: '/admin/login',
  name: 'admin-login',
  component: AdminLogin,
  beforeEnter(to, from, next) {
    console.log(store.state.user);
    if(store.getters.user) {
      // check if an agency is trying to log in as admin
      if (!store.getters.user.attributes['custom:role_id'] === 1) {
        next({ name: 'agency-dashboard', params: { agency: store.getters.user.attributes['custom:agency_id'] } });
      } else {
        next({ name: 'admin-dashboard' });
      }
    } else {
      next();
    }
  }
}

When I console.log(store.getters) I get an object of all the properties in state including a user object.

However, when I try access console.log(store.getters.user), which does exist in my store.js, it simply returns false which is the initial state of my user object on page load.

How come the user object is visible from state.getters but not state.getters.user?

1 answer

  • answered 2018-11-08 07:52 Hamilton Gabriel

    This seems to me a syntax error, because getters are accessed as properties that are cached as part of the Vue's reactivity system. Use to access it:

    this.$store.getters