From 869986bc502282ac42be39e2c461da738f0839a9 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Thu, 14 Nov 2024 17:33:12 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=20pinia=20store?=
 =?UTF-8?q?=20=E7=9A=84=E8=B0=83=E7=94=A8=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/directives/permission/index.ts |  4 ++--
 src/main.ts                        |  8 ++++----
 src/router/index.ts                |  4 +---
 src/router/permission.ts           | 12 +++++-------
 src/store/index.ts                 |  4 +---
 src/store/modules/app.ts           |  9 +++++++++
 src/store/modules/permission.ts    |  9 ++++++---
 src/store/modules/settings.ts      |  9 +++++++++
 src/store/modules/tags-view.ts     |  9 +++++++++
 src/store/modules/user.ts          |  9 ++++++---
 src/utils/permission.ts            |  4 ++--
 src/utils/service.ts               |  4 ++--
 12 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/src/directives/permission/index.ts b/src/directives/permission/index.ts
index 64d258cc..8d53690d 100644
--- a/src/directives/permission/index.ts
+++ b/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") // 隐藏
diff --git a/src/main.ts b/src/main.ts
index de94be67..a55e5364 100644
--- a/src/main.ts
+++ b/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")
 })
diff --git a/src/router/index.ts b/src/router/index.ts
index c35bb4bf..b724bc42 100644
--- a/src/router/index.ts
+++ b/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
diff --git a/src/router/permission.ts b/src/router/permission.ts
index cc8ba9c4..54e9c7bb 100644
--- a/src/router/permission.ts
+++ b/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()
     // 其他没有访问权限的页面将被重定向到登录页面
diff --git a/src/store/index.ts b/src/store/index.ts
index 136af169..06ef2150 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,5 +1,3 @@
 import { createPinia } from "pinia"
 
-const store = createPinia()
-
-export default store
+export const pinia = createPinia()
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index d9db89c3..f2d8abac 100644
--- a/src/store/modules/app.ts
+++ b/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)
+}
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 2ae6eeac..657ec3fc 100644
--- a/src/store/modules/permission.ts
+++ b/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)
 }
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 40de0d14..9b76736f 100644
--- a/src/store/modules/settings.ts
+++ b/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)
+}
diff --git a/src/store/modules/tags-view.ts b/src/store/modules/tags-view.ts
index 51194de8..7d6ba272 100644
--- a/src/store/modules/tags-view.ts
+++ b/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)
+}
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 634cfd97..dbd8f8a1 100644
--- a/src/store/modules/user.ts
+++ b/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)
 }
diff --git a/src/utils/permission.ts b/src/utils/permission.ts
index f736e3f0..89bdd0af 100644
--- a/src/utils/permission.ts
+++ b/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'])")
diff --git a/src/utils/service.ts b/src/utils/service.ts
index 58b37498..c9d76322 100644
--- a/src/utils/service.ts
+++ b/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()
 }