title: How to access vuex getters from vue-router and set guards?
body: <p>I am trying to get into the way of things with Vue but I've got some troubles with: </p>
  
  <p>1: I cannot get access to my getters from router/index.js file. (I can get access to it but it return like a function with returns function with I cannot call and get the value)</p>
  
  <p>2: I cannot set up guard properly. With Angular it's much easier </p>
  
  <p>What am I doing wrong here? Any suggestions? </p>
  
  <p>Router code </p>
  
  <pre class="lang-js prettyprint-override"><code>/* eslint-disable no-undef */
  import Vue from "vue";
  import VueRouter from "vue-router";
  // import auth from '../store/modules/auth';
  import { createNamespacedHelpers } from "vuex";
  const { mapGetters } = createNamespacedHelpers("auth");
  // import store from '../store';
  
  
  Vue.use(VueRouter);
  
  const routes = [
    {
      path: "/",
      name: "Home",
      component: () =&gt; import("../components/Home.vue"),
      meta: { requiresAuth: true }
    },
    {
      path: "/users",
      name: "Users",
      component: () =&gt; import("../components/Users/Users.vue"),
      meta: { requiresAuth: true }
    },
    {
      path: "/sign-in",
      name: "SignIn",
      component: () =&gt; import("../components/SignIn/SignIn.vue"),
    }
  ];
  
  const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
  });
  
  router.beforeEach((to, from, next) =&gt; {
    const storeGetters = { ...mapGetters(['isAuthenticated', 'authStatus', 'test']) };
  
    const isUserLoggedIn = storeGetters.isAuthenticated;
  
    if (to.matched.some(record =&gt; record.meta.requiresAuth)) {
      if (isUserLoggedIn) {
        console.log('user is authenticated');
        to; from;
        return next();
      } else {
        console.log('Access denied!');
        next({
          path: '/signIn',
          query: { redirect: to.fullPath }
        });
      }
  
      next({
        path: '/signIn',
        query: { redirect: to.fullPath }
      });
  
    } else {
      next();
    }
  
  })
  
  export default router;
  </code></pre>
  
  <p>Vuex index </p>
  
  <pre class="lang-js prettyprint-override"><code>import Vue from "vue";
  import Vuex from "vuex";
  import modules from "./modules"
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    strict: true,
    modules,
    state: {
      testState: 'State value'
    },
    getters: {
      test: state =&gt; state
    }
  });
  </code></pre>
  
  <p>auth module (vuex)</p>
  
  <pre class="lang-js prettyprint-override"><code>import { apolloClient } from '@/vue-apollo';
  import SignInGQL from "@/graphql/signIn.gql";
  
  export default {
      namespaced: true,
      state: {
          token: null,
          authStatus: false
      },
      getters: {
          isAuthenticated: (state) =&gt; {
              console.log('state: ', state);
              return !!state.token;
          },
          authStatus: state =&gt; state.authStatus,
          test: state =&gt; state.authStatus
      },
      actions: {
          async signIn({ commit, dispatch }, formInput) {
  
              try {
                  const { data } = await apolloClient.mutate({
                      mutation: SignInGQL,
                      variables: { ...formInput }
                  })
  
                  const { token } = data.signIn;
                  await commit('setToken', token);
                  localStorage.setItem('auth-token', token);
                  await dispatch('setUser', token);
              } catch (e) {
                  console.error(e)
              }
          },
          async setUser({ commit }, token) {
              const encodedPayload = token.split('.')[1];
  
              const { payload } = JSON.parse(atob(encodedPayload));
  
              // TODO: Set User information 
              await commit('signInUser', payload);
          }
      },
      mutations: {
          setToken(state, token) {
              state.token = token
          },
          signInUser(state, user) {
              console.log('authStatus: ', state.authStatus)
              state.authStatus = true
              state.user = { ...user }
              console.log('authStatus: ', state.authStatus)
          },
          logOutUser(state) {
              console.log('dispatched logOutUser')
              state.authStatus = ''
              state.token = '' &amp;&amp; localStorage.removeItem('auth-token')
          }
      }
  }
  </code></pre>