workflow: use pinia replace vuex and fix some bug

src/layout/components/Navbar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="navbar">
     <Hamburger
-      :is-active="sidebar.opened"
+      :is-active="pureApp.sidebar.opened"
       class="hamburger-container"
       @toggleClick="toggleSideBar"
     />
@@ -45,9 +45,9 @@ import { ref, defineComponent, onMounted, unref, watch } from "vue";
 import Breadcrumb from "/@/components/BreadCrumb";
 import Hamburger from "/@/components/HamBurger";
 import screenfull from "../components/screenfull/index.vue";
-import { useMapGetters } from "../store";
 import { useRouter, useRoute } from "vue-router";
-import { useStore } from "vuex";
+import { useAppStoreHook } from "/@/store/modules/app";
+import { mapGetters } from "pinia";
 import { storageSession } from "/@/utils/storage";
 import ch from "/@/assets/ch.png";
 import en from "/@/assets/en.png";
@@ -70,7 +70,7 @@ export default defineComponent({
   setup() {
     let langs = ref(true);
 
-    const store = useStore();
+    const pureApp = useAppStoreHook();
     const router = useRouter();
     const route = useRoute();
 
@@ -108,6 +108,10 @@ export default defineComponent({
       emitter.emit("openPanel");
     }
 
+    function toggleSideBar() {
+      pureApp.toggleSideBar();
+    }
+
     onMounted(() => {
       document
         .querySelector(".el-dropdown__popper")
@@ -118,11 +122,8 @@ export default defineComponent({
     });
 
     return {
-      // @ts-ignore
-      ...useMapGetters(["sidebar"]),
-      toggleSideBar() {
-        store.dispatch("app/toggleSideBar");
-      },
+      pureApp,
+      toggleSideBar,
       langs,
       usename,
       toggleLang,

src/layout/components/sidebar/index.vue

@@ -11,7 +11,7 @@
         @select="menuSelect"
       >
         <sidebar-item
-          v-for="route in routes"
+          v-for="route in routeStore.wholeRoutes"
           :key="route.path"
           :item="route"
           :base-path="route.path"
@@ -31,21 +31,24 @@ import {
   onBeforeMount
 } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { useStore } from "vuex";
+import { useAppStoreHook } from "/@/store/modules/app";
 import SidebarItem from "./SidebarItem.vue";
 import { algorithm } from "../../../utils/algorithm";
 import { useDynamicRoutesHook } from "../tag/tagsHook";
 import { emitter } from "/@/utils/mitt";
 import Logo from "./Logo.vue";
 import { storageLocal } from "/@/utils/storage";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
 
 export default defineComponent({
   name: "sidebar",
   components: { SidebarItem, Logo },
   setup() {
+    const routeStore = usePermissionStoreHook();
+
     const router = useRouter().options.routes;
 
-    const store = useStore();
+    const pureApp = useAppStoreHook();
 
     const route = useRoute();
 
@@ -89,11 +92,11 @@ export default defineComponent({
     });
 
     return {
-      routes: computed(() => algorithm.increaseIndexes(router)),
       activeMenu,
-      isCollapse: computed(() => !store.getters.sidebar.opened),
+      isCollapse: computed(() => !pureApp.getSidebarStatus),
       menuSelect,
-      showLogo
+      showLogo,
+      routeStore
     };
   }
 });

src/layout/index.vue

@@ -3,7 +3,7 @@
     <div
       v-if="device === 'mobile' && sidebar.opened"
       class="drawer-bg"
-      @click="handleClickOutside"
+      @click="handleClickOutside(false)"
     />
     <!-- 侧边栏 -->
     <sidebar class="sidebar-container" v-if="!containerHiddenSideBar" />
@@ -42,7 +42,8 @@ import {
   onBeforeMount,
   onBeforeUnmount
 } from "vue";
-import { useStore } from "vuex";
+import { useAppStoreHook } from "/@/store/modules/app";
+import { useSettingStoreHook } from "/@/store/modules/settings";
 import { useEventListener, useFullscreen } from "@vueuse/core";
 import { toggleClass, removeClass } from "/@/utils/operate";
 let hiddenMainContainer = "hidden-main-container";
@@ -67,7 +68,8 @@ export default {
     tag
   },
   setup() {
-    const store = useStore();
+    const pureApp = useAppStoreHook();
+    const pureSetting = useSettingStoreHook();
 
     const router = useRouter();
     const route = useRoute();
@@ -78,15 +80,15 @@ export default {
 
     const set: setInter = reactive({
       sidebar: computed(() => {
-        return store.state.app.sidebar;
+        return pureApp.sidebar;
       }),
 
       device: computed(() => {
-        return store.state.app.device;
+        return pureApp.device;
       }),
 
       fixedHeader: computed(() => {
-        return store.state.settings.fixedHeader;
+        return pureSetting.fixedHeader;
       }),
 
       classes: computed(() => {
@@ -99,16 +101,16 @@ export default {
       })
     });
 
+    const handleClickOutside = (params: Boolean) => {
+      pureApp.closeSideBar({ withoutAnimation: params });
+    };
+
     watchEffect(() => {
       if (set.device === "mobile" && !set.sidebar.opened) {
-        store.dispatch("app/closeSideBar", { withoutAnimation: false });
+        handleClickOutside(false);
       }
     });
 
-    const handleClickOutside = () => {
-      store.dispatch("app/closeSideBar", { withoutAnimation: false });
-    };
-
     const $_isMobile = () => {
       const rect = document.body.getBoundingClientRect();
       return rect.width - 1 < WIDTH.value;
@@ -117,10 +119,9 @@ export default {
     const $_resizeHandler = () => {
       if (!document.hidden) {
         const isMobile = $_isMobile();
-        store.dispatch("app/toggleDevice", isMobile ? "mobile" : "desktop");
-
+        pureApp.toggleDevice(isMobile ? "mobile" : "desktop");
         if (isMobile) {
-          store.dispatch("app/closeSideBar", { withoutAnimation: true });
+          handleClickOutside(true);
         }
       }
     };
@@ -146,8 +147,8 @@ export default {
     onMounted(() => {
       const isMobile = $_isMobile();
       if (isMobile) {
-        store.dispatch("app/toggleDevice", "mobile");
-        store.dispatch("app/closeSideBar", { withoutAnimation: true });
+        pureApp.toggleDevice("mobile");
+        handleClickOutside(true);
       }
       toggleClass(
         unref(containerHiddenSideBar),

src/layout/store.ts

@@ -1,14 +0,0 @@
-import { computed, ComputedRef } from "vue";
-import { useStore } from "vuex";
-
-export function useMapGetters<T extends string>(keys: T[]) {
-  const res: Record<string, ComputedRef> = {}
-  // @ts-ignore
-  const { getters } = useStore()
-  keys.map(key => {
-    if (Reflect.has(getters, key)) {
-      res[key] = computed(() => getters[key])
-    }
-  })
-  return res as any as Record<T, ComputedRef>
-}