refactor: migrate Vue components and stores to Composition API

src/store/modules/permission.ts

@@ -1,5 +1,6 @@
 import cloneDeep from 'lodash/cloneDeep';
 import { defineStore } from 'pinia';
+import { ref } from 'vue';
 import type { RouteRecordRaw } from 'vue-router';
 
 import type { RouteItem } from '@/api/model/permissionModel';
@@ -8,45 +9,46 @@ import router, { fixedRouterList, homepageRouterList } from '@/router';
 import { store } from '@/store';
 import { transformObjectToRoute } from '@/utils/route';
 
-export const usePermissionStore = defineStore('permission', {
-  state: () => ({
-    whiteListRouters: ['/login'],
-    routers: [] as Array<RouteRecordRaw>,
-    removeRoutes: [] as Array<RouteRecordRaw>,
-    asyncRoutes: [] as Array<RouteRecordRaw>,
-  }),
-  actions: {
-    async initRoutes() {
-      const accessedRouters = this.asyncRoutes;
+export const usePermissionStore = defineStore('permission', () => {
+  const whiteListRouters = ref(['/login']);
+  const routers = ref<Array<RouteRecordRaw>>([]);
+  const removeRoutes = ref<Array<RouteRecordRaw>>([]);
+  const asyncRoutes = ref<Array<RouteRecordRaw>>([]);
 
-      // 在菜单展示全部路由
-      this.routers = cloneDeep([...homepageRouterList, ...accessedRouters, ...fixedRouterList]);
-      // 在菜单只展示动态路由和首页
-      // this.routers = [...homepageRouterList, ...accessedRouters];
-      // 在菜单只展示动态路由
-      // this.routers = [...accessedRouters];
-    },
-    async buildAsyncRoutes() {
-      try {
-        // 发起菜单权限请求 获取菜单列表
-        const asyncRoutes: Array<RouteItem> = (await getMenuList()).list;
-        this.asyncRoutes = transformObjectToRoute(asyncRoutes);
-        await this.initRoutes();
-        return this.asyncRoutes;
-      } catch (error) {
-        throw new Error("Can't build routes", error as ErrorOptions);
+  async function initRoutes() {
+    const accessedRouters = asyncRoutes.value;
+
+    // 在菜单展示全部路由
+    routers.value = cloneDeep([...homepageRouterList, ...accessedRouters, ...fixedRouterList]);
+    // 在菜单只展示动态路由和首页
+    // routers.value = [...homepageRouterList, ...accessedRouters];
+    // 在菜单只展示动态路由
+    // routers.value = [...accessedRouters];
+  }
+
+  async function buildAsyncRoutes() {
+    try {
+      // 发起菜单权限请求 获取菜单列表
+      const routeItems: Array<RouteItem> = (await getMenuList()).list;
+      asyncRoutes.value = transformObjectToRoute(routeItems);
+      await initRoutes();
+      return asyncRoutes.value;
+    } catch (error) {
+      throw new Error("Can't build routes", error as ErrorOptions);
+    }
+  }
+
+  async function restoreRoutes() {
+    // 不需要在此额外调用initRoutes更新侧边导肮内容，在登录后asyncRoutes为空会调用
+    asyncRoutes.value.forEach((item: RouteRecordRaw) => {
+      if (item.name) {
+        router.removeRoute(item.name);
       }
-    },
-    async restoreRoutes() {
-      // 不需要在此额外调用initRoutes更新侧边导肮内容，在登录后asyncRoutes为空会调用
-      this.asyncRoutes.forEach((item: RouteRecordRaw) => {
-        if (item.name) {
-          router.removeRoute(item.name);
-        }
-      });
-      this.asyncRoutes = [];
-    },
-  },
+    });
+    asyncRoutes.value = [];
+  }
+
+  return { whiteListRouters, routers, removeRoutes, asyncRoutes, initRoutes, buildAsyncRoutes, restoreRoutes };
 });
 
 export function getPermissionStore() {