Vue.jsのrouterファイルでvuexのstoreを読み込む

Vue.jsのrouterファイルでvuexのstoreを読み込んで、ログイン状態判定などに使用する場面は多いかと思います。

今回使用していたVue.jsのバージョンが3.2.31だったので、useStoreが使えるかと思ったのですが、うまくいかなかったので対応方法をまとめておきます。

vuexのstoreを読み込む

import { useStore } from "vuex"; を読み込むかと思いきや、import store from '@/store/index';で読み込みを行います。

下記はサンプルのrouterファイルです。
ログイン画面と、ログインしなければ表示できないホーム画面がある想定です。

src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Login from '../views/Login.vue';
import Home from '../views/Home.vue';
import store from '@/store/index'; // storeをインポート

const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true }
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

router.beforeEach((to, from, next) => {
  // 例の `!store.getters.loggedIn` のように、storeを利用可能です。
  // getter.loggedInはログイン状態を確認するプロパティで、
  // storeファイルで定義しているものとします。
  if(to.matched.some(record => record.meta.requiresAuth) && !store.getters.loggedIn) {
    next({ path: '/login', query: { redirect: to.fullPath } });
  } else {
    next();
  }
});

export default router;