refactor: 更新 pinia store 的调用方式

src/directives/permission/index.ts

@@ -1,11 +1,11 @@
 import { type Directive } from "vue"
-import { useUserStoreHook } from "@/store/modules/user"
+import { useUserStore } from "@/store/modules/user"
 
 /** 权限指令，和权限判断函数 checkPermission 功能类似 */
 export const permission: Directive = {
   mounted(el, binding) {
     const { value: permissionRoles } = binding
-    const { roles } = useUserStoreHook()
+    const { roles } = useUserStore()
     if (Array.isArray(permissionRoles) && permissionRoles.length > 0) {
       const hasPermission = roles.some((role) => permissionRoles.includes(role))
       // hasPermission || (el.style.display = "none") // 隐藏

src/main.ts

@@ -1,8 +1,8 @@
 // core
-import { createApp } from "vue"
 import App from "@/App.vue"
-import store from "@/store"
-import router from "@/router"
+import { createApp } from "vue"
+import { pinia } from "@/store"
+import { router } from "@/router"
 import "@/router/permission"
 // load
 import { loadSvg } from "@/icons"
@@ -26,7 +26,7 @@ loadSvg(app)
 /** 加载自定义指令 */
 loadDirectives(app)
 
-app.use(store).use(router)
+app.use(pinia).use(router)
 router.isReady().then(() => {
   app.mount("#app")
 })

src/router/index.ts

@@ -289,7 +289,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
   }
 ]
 
-const router = createRouter({
+export const router = createRouter({
   history,
   routes: routeSettings.thirdLevelRouteCache ? flatMultiLevelRoutes(constantRoutes) : constantRoutes
 })
@@ -309,5 +309,3 @@ export function resetRouter() {
     window.location.reload()
   }
 }
-
-export default router

src/router/permission.ts

@@ -1,4 +1,4 @@
-import router from "@/router"
+import { router } from "@/router"
 import { useUserStoreHook } from "@/store/modules/user"
 import { usePermissionStoreHook } from "@/store/modules/permission"
 import { ElMessage } from "element-plus"
@@ -10,17 +10,15 @@ import isWhiteList from "@/config/white-list"
 import NProgress from "nprogress"
 import "nprogress/nprogress.css"
 
-const { setTitle } = useTitle()
 NProgress.configure({ showSpinner: false })
+const { setTitle } = useTitle()
+const userStore = useUserStoreHook()
+const permissionStore = usePermissionStoreHook()
 
 router.beforeEach(async (to, _from, next) => {
   NProgress.start()
-  const userStore = useUserStoreHook()
-  const permissionStore = usePermissionStoreHook()
-  const token = getToken()
-
   // 如果没有登陆
-  if (!token) {
+  if (!getToken()) {
     // 如果在免登录的白名单中，则直接进入
     if (isWhiteList(to)) return next()
     // 其他没有访问权限的页面将被重定向到登录页面

src/store/index.ts

@@ -1,5 +1,3 @@
 import { createPinia } from "pinia"
 
-const store = createPinia()
-
-export default store
+export const pinia = createPinia()

src/store/modules/app.ts

@@ -1,4 +1,5 @@
 import { reactive, ref, watch } from "vue"
+import { pinia } from "@/store"
 import { defineStore } from "pinia"
 import { getSidebarStatus, setSidebarStatus } from "@/utils/cache/local-storage"
 import { DeviceEnum, SIDEBAR_OPENED, SIDEBAR_CLOSED } from "@/constants/app-key"
@@ -45,3 +46,11 @@ export const useAppStore = defineStore("app", () => {
 
   return { device, sidebar, toggleSidebar, closeSidebar, toggleDevice }
 })
+
+/**
+ * 在 SPA 应用中可用于在 pinia 实例被激活前使用 store
+ * 在 SSR 应用中可用于在 setup 外使用 store
+ */
+export function useAppStoreHook() {
+  return useAppStore(pinia)
+}

src/store/modules/permission.ts

@@ -1,5 +1,5 @@
 import { ref } from "vue"
-import store from "@/store"
+import { pinia } from "@/store"
 import { defineStore } from "pinia"
 import { type RouteRecordRaw } from "vue-router"
 import { constantRoutes, dynamicRoutes } from "@/router"
@@ -50,7 +50,10 @@ export const usePermissionStore = defineStore("permission", () => {
   return { routes, addRoutes, setRoutes, setAllRoutes }
 })
 
-/** 在 setup 外使用 */
+/**
+ * 在 SPA 应用中可用于在 pinia 实例被激活前使用 store
+ * 在 SSR 应用中可用于在 setup 外使用 store
+ */
 export function usePermissionStoreHook() {
-  return usePermissionStore(store)
+  return usePermissionStore(pinia)
 }

src/store/modules/settings.ts

@@ -1,4 +1,5 @@
 import { type Ref, ref, watch } from "vue"
+import { pinia } from "@/store"
 import { defineStore } from "pinia"
 import { type LayoutSettings, layoutSettings } from "@/config/layouts"
 import { setConfigLayout } from "@/utils/cache/local-storage"
@@ -38,3 +39,11 @@ export const useSettingsStore = defineStore("settings", () => {
 
   return state
 })
+
+/**
+ * 在 SPA 应用中可用于在 pinia 实例被激活前使用 store
+ * 在 SSR 应用中可用于在 setup 外使用 store
+ */
+export function useSettingsStoreHook() {
+  return useSettingsStore(pinia)
+}

src/store/modules/tags-view.ts

@@ -1,4 +1,5 @@
 import { ref, watchEffect } from "vue"
+import { pinia } from "@/store"
 import { defineStore } from "pinia"
 import { useSettingsStore } from "./settings"
 import { type RouteLocationNormalized } from "vue-router"
@@ -93,3 +94,11 @@ export const useTagsViewStore = defineStore("tags-view", () => {
     delAllCachedViews
   }
 })
+
+/**
+ * 在 SPA 应用中可用于在 pinia 实例被激活前使用 store
+ * 在 SSR 应用中可用于在 setup 外使用 store
+ */
+export function useTagsViewStoreHook() {
+  return useTagsViewStore(pinia)
+}

src/store/modules/user.ts

@@ -1,5 +1,5 @@
 import { ref } from "vue"
-import store from "@/store"
+import { pinia } from "@/store"
 import { defineStore } from "pinia"
 import { useTagsViewStore } from "./tags-view"
 import { useSettingsStore } from "./settings"
@@ -63,7 +63,10 @@ export const useUserStore = defineStore("user", () => {
   return { token, roles, username, login, getInfo, changeRoles, logout, resetToken }
 })
 
-/** 在 setup 外使用 */
+/**
+ * 在 SPA 应用中可用于在 pinia 实例被激活前使用 store
+ * 在 SSR 应用中可用于在 setup 外使用 store
+ */
 export function useUserStoreHook() {
-  return useUserStore(store)
+  return useUserStore(pinia)
 }

src/utils/permission.ts

@@ -1,9 +1,9 @@
-import { useUserStoreHook } from "@/store/modules/user"
+import { useUserStore } from "@/store/modules/user"
 
 /** 全局权限判断函数，和权限指令 v-permission 功能类似 */
 export const checkPermission = (permissionRoles: string[]): boolean => {
   if (Array.isArray(permissionRoles) && permissionRoles.length > 0) {
-    const { roles } = useUserStoreHook()
+    const { roles } = useUserStore()
     return roles.some((role) => permissionRoles.includes(role))
   } else {
     console.error("need roles! Like checkPermission(['admin','editor'])")

src/utils/service.ts

@@ -1,12 +1,12 @@
 import axios, { type AxiosInstance, type AxiosRequestConfig } from "axios"
-import { useUserStoreHook } from "@/store/modules/user"
+import { useUserStore } from "@/store/modules/user"
 import { ElMessage } from "element-plus"
 import { get, merge } from "lodash-es"
 import { getToken } from "./cache/cookies"
 
 /** 退出登录并强制刷新页面（会重定向到登录页） */
 function logout() {
-  useUserStoreHook().logout()
+  useUserStore().logout()
   location.reload()
 }