Vue Router access individual getters from Vuex

Question

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?

Answer 1

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