状态库跟换Pinia

Author: sunshine824

package.json

@@ -10,11 +10,12 @@
     "axios": "^0.21.1",
     "codemirror": "^5.62.2",
     "crypto-js": "^4.0.0",
+    "pinia": "^2.0.11",
+    "pinia-plugin-persist": "^0.0.93",
     "qs": "^6.10.1",
     "spark-md5": "^3.0.1",
-    "vue": "^3.0.5",
-    "vue-router": "^4.0.9",
-    "vuex": "^4.0.1"
+    "vue": "^3.2.30",
+    "vue-router": "^4.0.9"
   },
   "devDependencies": {
     "@types/node": "^16.4.3",

src/layouts/LevelBasicLayout.tsx

@@ -1,6 +1,8 @@
 import { defineComponent, computed } from 'vue'
 import { RouterView, RouteRecordRaw, useRouter, useRoute } from 'vue-router'
-import { Layout, Dropdown } from 'ant-design-vue'
+import { Layout, Dropdown, Menu } from 'ant-design-vue'
+import { CommonStore } from '@/store/modules/common'
+import { storeToRefs } from 'pinia'
 import { GlobalHeader, Menus, LevelMenus } from '@/components/GlobalHeader'
 
 import styles from './index.module.less'
@@ -11,6 +13,9 @@ const LevelBasicLayout = defineComponent({
   setup() {
     const router = useRouter()
     const route = useRoute()
+    const common = CommonStore()
+    // common store data
+    const { getUserInfo } = storeToRefs(common)
 
     // 获取显示状态的路由
     const menuLists = computed(() => {
@@ -49,23 +54,43 @@ const LevelBasicLayout = defineComponent({
       })
       return JSON.parse(JSON.stringify(menuList))
     }
+
+    // 退出
+    const exit = () => {
+      sessionStorage.clear()
+      router.push('/login')
+    }
+
+    const menuSlots = {
+      overlay: () => (
+        <Menu>
+          <Menu.Item>
+            <span onClick={exit}>退出</span>
+          </Menu.Item>
+        </Menu>
+      ),
+    }
+
     const slots = {
       content: () => (
         <>
           {/* 导航栏 */}
           <LevelMenus menuLists={menuLists['value']}></LevelMenus>
           {/* 用户信息 */}
           <div class={styles['user-info']}>
-            <Dropdown>
+            <Dropdown v-slots={menuSlots}>
               <div>
                 <img src={UserIcon} class={styles['user-head']} />
-                <a class={styles['user-name']}>admin</a>
+                <a class={styles['user-name']}>
+                  {getUserInfo['value']['username']}
+                </a>
               </div>
             </Dropdown>
           </div>
         </>
       ),
     }
+
     return () => (
       <Layout class={styles['level-layout']}>
         <GlobalHeader v-slots={slots}></GlobalHeader>

src/layouts/SimplifyBasicLayout.tsx

@@ -0,0 +1,86 @@
+import { defineComponent, computed } from 'vue'
+import { CommonStore } from '@/store/modules/common'
+import { storeToRefs } from 'pinia'
+import { Layout, Dropdown, Menu } from 'ant-design-vue'
+import { GlobalHeader, Menus } from '@/components/GlobalHeader'
+import { RouterView, RouteRecordRaw, useRouter, useRoute } from 'vue-router'
+
+import styles from './index.module.less'
+import UserIcon from '../assets/user.png'
+
+const SimplifyBasicLayout = defineComponent({
+  name: 'SimplifyBasicLayout',
+  setup() {
+    const router = useRouter()
+    const common = CommonStore()
+    // common store data
+    const { getUserInfo } = storeToRefs(common)
+
+    // 获取路由列表
+    const getMenus = () => {
+      let menuList: RouteRecordRaw[] = []
+      const routes: Array<RouteRecordRaw> = router.options?.routes || []
+      routes.forEach((item) => {
+        if (item.path == '/') {
+          menuList = item.children || []
+        }
+      })
+      return JSON.parse(JSON.stringify(menuList))
+    }
+
+    // 获取显示状态的路由
+    const menuLists = computed(() => {
+      return getMenus().filter((item: any) => !item?.meta?.hidden)
+    })
+
+    // 退出
+    const exit = () => {
+      sessionStorage.clear()
+      router.push('/login')
+    }
+
+    const menuSlots = {
+      overlay: () => (
+        <Menu>
+          <Menu.Item>
+            <span onClick={exit}>退出</span>
+          </Menu.Item>
+        </Menu>
+      ),
+    }
+
+    const slots = {
+      content: () => (
+        <>
+          {/* 用户信息 */}
+          <div class={styles['user-info']}>
+            <Dropdown v-slots={menuSlots}>
+              <div>
+                <img src={UserIcon} class={styles['user-head']} />
+                <a class={styles['user-name']}>
+                  {getUserInfo['value']['username']}
+                </a>
+              </div>
+            </Dropdown>
+          </div>
+        </>
+      ),
+    }
+    return () => (
+      <Layout class={styles['level-layout']}>
+        <GlobalHeader v-slots={slots}></GlobalHeader>
+        <div class={styles['level-content']}>
+          {/* 导航栏 */}
+          <div class={styles['vertical-sub-menu']}>
+            <Menus menuLists={menuLists['value']} mode="inline"></Menus>
+          </div>
+          <Layout.Content>
+            <RouterView />
+          </Layout.Content>
+        </div>
+      </Layout>
+    )
+  },
+})
+
+export default SimplifyBasicLayout

src/layouts/index.ts

@@ -1,5 +1,6 @@
 import LevelBasicLayout from './LevelBasicLayout'
+import SimplifyBasicLayout from './SimplifyBasicLayout'
 import RouteLayout from './RouteLayout'
 import BlankLayout from './BlankLayout'
 
-export { LevelBasicLayout, RouteLayout, BlankLayout }
+export { LevelBasicLayout, SimplifyBasicLayout, RouteLayout, BlankLayout }

src/main.ts

@@ -1,9 +1,9 @@
 import { createApp } from 'vue'
-import { store, key } from './store'
+import store from './store'
 import router from './router'
 import moment from 'moment'
 import App from './App'
-import { setupAntd } from './plugins/antd'
+import Antd from 'ant-design-vue'
 
 moment.locale('zh-cn')
 
@@ -16,8 +16,4 @@ import 'ant-design-vue/dist/antd.css'
 
 const app = createApp(App)
 
-setupAntd(app)
-app.use(router)
-app.use(store, key)
-
-app.mount('#app')
+app.use(router).use(Antd).use(store).mount('#app')

src/router/index.ts

@@ -7,8 +7,8 @@ import {
   NavigationGuardNext,
   Router,
 } from 'vue-router'
-import { mainRoutes, baseRoutes } from './router.config'
-import { getToken } from '@/utils/token'
+import { mainRoutes, baseRoutes, Routes } from './router.config'
+import { getToken } from '@/utils/util'
 import { getPermissionsList } from '@/api/user'
 import { RouteLayout, BlankLayout } from '@/layouts'
 
@@ -78,8 +78,8 @@ router.beforeEach(
               menu.menuList || [],
               [],
             )
-            console.log(menuRoutes)
-            mainRoutes.children?.unshift(...menuRoutes)
+            mainRoutes.children = []
+            mainRoutes.children?.unshift(...menuRoutes, ...Routes)
             // 动态添加路由
             router.addRoute(mainRoutes)
             // 注：这步很关键，不然导航获取不到路由

src/router/router.config.ts

@@ -1,42 +1,37 @@
 import { RouteRecordRaw } from 'vue-router'
-import { LevelBasicLayout, RouteLayout } from '@/layouts'
+import { SimplifyBasicLayout, RouteLayout } from '@/layouts'
 
 // 导航路由
-const Routes: Array<RouteRecordRaw> = []
+const Routes: Array<RouteRecordRaw> = [
+  {
+    path: '/403',
+    name: '403',
+    component: () =>
+      import(/* webpackChunkName: "403" */ '@/views/exception/403'),
+    meta: { title: '403', permission: ['exception'], hidden: true },
+  },
+  {
+    path: '/404',
+    name: '404',
+    component: () =>
+      import(/* webpackChunkName: "404" */ '@/views/exception/404'),
+    meta: { title: '404', permission: ['exception'], hidden: true },
+  },
+  {
+    path: '/500',
+    name: '500',
+    component: () =>
+      import(/* webpackChunkName: "500" */ '@/views/exception/500'),
+    meta: { title: '500', permission: ['exception'], hidden: true },
+  },
+]
 
 // 主路由
 const mainRoutes: RouteRecordRaw = {
   path: '/',
   redirect: '/login',
-  component: LevelBasicLayout,
-  children: [
-    // ...Routes,
-    {
-      path: '/403',
-      name: '403',
-      component: () =>
-        import(/* webpackChunkName: "403" */ '@/views/exception/403'),
-      meta: { title: '403', permission: ['exception'], hidden: true },
-    },
-    {
-      path: '/404',
-      name: '404',
-      component: () =>
-        import(/* webpackChunkName: "404" */ '@/views/exception/404'),
-      meta: { title: '404', permission: ['exception'], hidden: true },
-    },
-    {
-      path: '/500',
-      name: '500',
-      component: () =>
-        import(/* webpackChunkName: "500" */ '@/views/exception/500'),
-      meta: { title: '500', permission: ['exception'], hidden: true },
-    },
-    // {
-    //   path: '/:pathMatch(.*)*',
-    //   redirect: { name: '404' },
-    // },
-  ],
+  component: SimplifyBasicLayout,
+  children: [],
 }
 
 // 基础路由
@@ -49,4 +44,4 @@ const baseRoutes: Array<RouteRecordRaw> = [
   },
 ]
 
-export { mainRoutes, baseRoutes }
+export { mainRoutes, baseRoutes, Routes }

src/store/index.ts

@@ -1,11 +1,6 @@
-import { InjectionKey } from 'vue'
-import { createStore, Store } from 'vuex'
-import common from './modules/common'
+import { createPinia } from 'pinia'
+import piniaPluginPersist from 'pinia-plugin-persist'
 
-export interface State {}
+const store = createPinia().use(piniaPluginPersist)
 
-export const key: InjectionKey<Store<State>> = Symbol()
-
-export const store = createStore<State>({
-  modules: { common },
-})
+export default store

src/store/modules/common.ts

@@ -1,23 +1,25 @@
-interface State {
-  count: number
-}
+import { defineStore } from 'pinia'
 
-const initPageState = () => {
-  return {
-    count: 1,
-  }
-}
-
-const common = {
-  state: initPageState(),
+export const CommonStore = defineStore('common', {
+  // 状态库
+  state: () => ({
+    userInfo: {}, //用户信息
+  }),
   getters: {
-    getCount: (state: State) => state.count,
+    getUserInfo: (state) => state.userInfo?.userInfo,
   },
-  mutations: {
-    setCountNum(state: State) {
-      state.count++
+  actions: {
+    setUserInfo<T>(data: T) {
+      this.userInfo = data
     },
   },
-}
-
-export default common
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        //storage: localStorage,
+        paths: ['userInfo'],
+      },
+    ],
+  },
+})

src/utils/fetch.ts

@@ -1,5 +1,5 @@
 import axios, { AxiosRequestConfig, AxiosResponse, AxiosInstance } from 'axios'
-import { getToken, removeToken } from './token'
+import { getToken } from './util'
 import { Modal } from 'ant-design-vue'
 import { Message, Notification } from '@/utils/resetMessage'
 
@@ -37,7 +37,7 @@ service.interceptors.response.use(
           title: 'token出错',
           content: 'token失效，请重新登录！',
           onOk: () => {
-            removeToken()
+            sessionStorage.clear()
           },
         })
       } else if (code == 200) {