workflow: use pinia replace vuex and fix some bug

src/store/modules/app.ts

@@ -1,58 +1,64 @@
-import { storageLocal } from "../../utils/storage"
-interface stateInter {
+import { storageLocal } from "../../utils/storage";
+import { defineStore } from "pinia";
+import { store } from "/@/store";
+
+interface AppState {
   sidebar: {
-    opened: Boolean,
-    withoutAnimation: Boolean
-  },
-  device: String
+    opened: Boolean;
+    withoutAnimation: Boolean;
+  };
+  device: String;
 }
 
-const state = {
-  sidebar: {
-    opened: storageLocal.getItem('sidebarStatus') ? !!+storageLocal.getItem('sidebarStatus') : true,
-    withoutAnimation: false
+export const useAppStore = defineStore({
+  id: "pure-app",
+  state: (): AppState => ({
+    sidebar: {
+      opened: storageLocal.getItem("sidebarStatus")
+        ? !!+storageLocal.getItem("sidebarStatus")
+        : true,
+      withoutAnimation: false,
+    },
+    device: "desktop",
+  }),
+  getters: {
+    getSidebarStatus() {
+      return this.sidebar.opened;
+    },
+    getDevice() {
+      return this.device;
+    },
   },
-  device: 'desktop'
-}
+  actions: {
+    TOGGLE_SIDEBAR() {
+      this.sidebar.opened = !this.sidebar.opened;
+      this.sidebar.withoutAnimation = false;
+      if (this.sidebar.opened) {
+        storageLocal.setItem("sidebarStatus", 1);
+      } else {
+        storageLocal.setItem("sidebarStatus", 0);
+      }
+    },
+    CLOSE_SIDEBAR(withoutAnimation: Boolean) {
+      storageLocal.setItem("sidebarStatus", 0);
+      this.sidebar.opened = false;
+      this.sidebar.withoutAnimation = withoutAnimation;
+    },
+    TOGGLE_DEVICE(device: String) {
+      this.device = device;
+    },
+    async toggleSideBar() {
+      await this.TOGGLE_SIDEBAR();
+    },
+    closeSideBar(withoutAnimation) {
+      this.CLOSE_SIDEBAR(withoutAnimation);
+    },
+    toggleDevice(device) {
+      this.TOGGLE_DEVICE(device);
+    },
+  },
+});
 
-const mutations = {
-  TOGGLE_SIDEBAR: (state: stateInter): void => {
-    state.sidebar.opened = !state.sidebar.opened
-    state.sidebar.withoutAnimation = false
-     if (state.sidebar.opened) {
-      storageLocal.setItem('sidebarStatus', 1)
-    } else {
-      storageLocal.setItem('sidebarStatus', 0)
-    }
-  },
-  CLOSE_SIDEBAR: (state: stateInter, withoutAnimation: Boolean) => {
-    storageLocal.setItem('sidebarStatus', 0)
-    state.sidebar.opened = false
-    state.sidebar.withoutAnimation = withoutAnimation
-  },
-  TOGGLE_DEVICE: (state: stateInter, device: String) => {
-    state.device = device
-  }
-}
-
-const actions = {
-  // @ts-ignore
-  toggleSideBar({ commit }) {
-    commit('TOGGLE_SIDEBAR')
-  },
-  // @ts-ignore
-  closeSideBar({ commit }, { withoutAnimation }) {
-    commit('CLOSE_SIDEBAR', withoutAnimation)
-  },
-  // @ts-ignore
-  toggleDevice({ commit }, device) {
-    commit('TOGGLE_DEVICE', device)
-  }
-}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
+export function useAppStoreHook() {
+  return useAppStore(store);
 }

src/store/modules/permission.ts

@@ -0,0 +1,74 @@
+import { defineStore } from "pinia";
+import { store } from "/@/store";
+
+import { constantRoutesArr, ascending, isLogin } from "/@/router/index";
+
+import { getAsyncRoutes } from "/@/api/routes";
+import Layout from "/@/layout/index.vue";
+import router from "/@/router/index";
+
+// https://cn.vitejs.dev/guide/features.html#glob-import
+const modulesRoutes = import.meta.glob("/src/views/*/*/*.vue");
+
+// 过滤后端传来的动态路由重新生成规范路由
+const addAsyncRoutes = (arrRoutes: Array<string>) => {
+  if (!arrRoutes || !arrRoutes.length) return;
+  arrRoutes.forEach((v: any) => {
+    if (v.redirect) {
+      v.component = Layout;
+    } else {
+      v.component = modulesRoutes[`/src/views${v.path}/index.vue`];
+    }
+    if (v.children) {
+      addAsyncRoutes(v.children);
+    }
+  });
+  return arrRoutes;
+};
+
+export const usePermissionStore = defineStore({
+  id: "pure-permission",
+  state: () => ({
+    constantRoutes: constantRoutesArr, //静态路由
+    asyncRoutes: [], //动态路由
+    wholeRoutes: [],
+  }),
+  actions: {
+    asyncActionRoutes(routes) {
+      this.wholeRoutes = ascending(this.constantRoutes.concat(routes)).filter(
+        (v) => v.meta.showLink
+      );
+      this.asyncRoutes.push(routes);
+    },
+    async changeSetting() {
+      // 异步路由
+      await getAsyncRoutes({ name: isLogin.username }).then(({ info }) => {
+        if (info.length === 0) {
+          this.wholeRoutes = router.options.routes.filter(
+            (v) => v.meta.showLink
+          );
+          return;
+        }
+        addAsyncRoutes([info]).forEach((v: any) => {
+          // 防止重复添加路由
+          if (
+            router.options.routes.findIndex(
+              (value) => value.path === v.path
+            ) !== -1
+          )
+            return;
+          // 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转
+          router.options.routes.push(v);
+          // 最终路由进行升序
+          ascending(router.options.routes);
+          router.addRoute(v.name, v);
+          this.asyncActionRoutes(v);
+        });
+      });
+    },
+  },
+});
+
+export function usePermissionStoreHook() {
+  return usePermissionStore(store);
+}

src/store/modules/settings.ts

@@ -1,27 +1,38 @@
 import defaultSettings from "../../settings";
+import { defineStore } from "pinia";
+import { store } from "/@/store";
 
-const state = {
-  title: defaultSettings.title,
-  fixedHeader: defaultSettings.fixedHeader,
-};
+interface SettingState {
+  title: String;
+  fixedHeader: Boolean;
+}
 
-const mutations = {
-  CHANGE_SETTING: (state: any, { key, value }) => {
-    if (state.hasOwnProperty(key)) {
-      state[key] = value;
-    }
+export const useSettingStore = defineStore({
+  id: "pure-setting",
+  state: (): SettingState => ({
+    title: defaultSettings.title,
+    fixedHeader: defaultSettings.fixedHeader,
+  }),
+  getters: {
+    getTitle() {
+      return this.title;
+    },
+    getFixedHeader() {
+      return this.fixedHeader;
+    },
   },
-};
-
-const actions = {
-  changeSetting({ commit }, data) {
-    commit("CHANGE_SETTING", data);
+  actions: {
+    CHANGE_SETTING({ key, value }) {
+      if (this.hasOwnProperty(key)) {
+        this[key] = value;
+      }
+    },
+    changeSetting(data) {
+      this.CHANGE_SETTING(data);
+    },
   },
-};
+});
 
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions,
-};
+export function useSettingStoreHook() {
+  return useSettingStore(store);
+}