vue router 에서 vuex modules store 참조하기

router.js에서 store.js 내 vuex 저장소 모듈을 사용하려면 

아래와 같이, store.getters["스토어모듈명/함수명"] 접근하면 됨.

const isLogin = store.getters["userStore/isLogin"];

// router.js

import Vue from "vue";
import Router from "vue-router";
import { store } from "@/js/store/store";
Vue.use(Router);
...
...

router.beforeEach((to, from, next) => {
  console.log(store);
  
  const isLogin = store.getters["userStore/isLogin"];
  
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (!isLogin) {
      next({
        name: "LoginForm",
        query: { redirect: to.fullPath },
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

// store.js

import Vue from "vue";
import Vuex from "vuex";
import userStore from "./modules/UserStore";
import companyStore from "./modules/CompanyStore";

Vue.use(Vuex);

export const store = new Vuex.Store({
  modules: {
    userStore,
    companyStore,
  },
});

// UserStore.js
const userStore = {
  namespaced: true,
  state: {
    userInfo: AuthService.getUser() || AuthService.newUser(),
    token: AuthService.getToken() || "",
  },

  getters: {
    isLogin(state) {
      return state.userInfo.userNm !== null;
    },
  },

참고로

f12번 눌러 console.log(store)를 확인 해보면, 어떤녀석들이 있는지 확인 가능하니 참고하자.