Skip to content

Commit 55636dd

Browse files
author
sunshine824
committed
状态库跟换Pinia
1 parent 6a0caee commit 55636dd

File tree

16 files changed

+433
-250
lines changed

16 files changed

+433
-250
lines changed

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010
"axios": "^0.21.1",
1111
"codemirror": "^5.62.2",
1212
"crypto-js": "^4.0.0",
13+
"pinia": "^2.0.11",
14+
"pinia-plugin-persist": "^0.0.93",
1315
"qs": "^6.10.1",
1416
"spark-md5": "^3.0.1",
15-
"vue": "^3.0.5",
16-
"vue-router": "^4.0.9",
17-
"vuex": "^4.0.1"
17+
"vue": "^3.2.30",
18+
"vue-router": "^4.0.9"
1819
},
1920
"devDependencies": {
2021
"@types/node": "^16.4.3",

‎src/layouts/LevelBasicLayout.tsx‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { defineComponent, computed } from 'vue'
22
import { RouterView, RouteRecordRaw, useRouter, useRoute } from 'vue-router'
3-
import { Layout, Dropdown } from 'ant-design-vue'
3+
import { Layout, Dropdown, Menu } from 'ant-design-vue'
4+
import { CommonStore } from '@/store/modules/common'
5+
import { storeToRefs } from 'pinia'
46
import { GlobalHeader, Menus, LevelMenus } from '@/components/GlobalHeader'
57

68
import styles from './index.module.less'
@@ -11,6 +13,9 @@ const LevelBasicLayout = defineComponent({
1113
setup() {
1214
const router = useRouter()
1315
const route = useRoute()
16+
const common = CommonStore()
17+
// common store data
18+
const { getUserInfo } = storeToRefs(common)
1419

1520
// 获取显示状态的路由
1621
const menuLists = computed(() => {
@@ -49,23 +54,43 @@ const LevelBasicLayout = defineComponent({
4954
})
5055
return JSON.parse(JSON.stringify(menuList))
5156
}
57+
58+
// 退出
59+
const exit = () => {
60+
sessionStorage.clear()
61+
router.push('/login')
62+
}
63+
64+
const menuSlots = {
65+
overlay: () => (
66+
<Menu>
67+
<Menu.Item>
68+
<span onClick={exit}>退出</span>
69+
</Menu.Item>
70+
</Menu>
71+
),
72+
}
73+
5274
const slots = {
5375
content: () => (
5476
<>
5577
{/* 导航栏 */}
5678
<LevelMenus menuLists={menuLists['value']}></LevelMenus>
5779
{/* 用户信息 */}
5880
<div class={styles['user-info']}>
59-
<Dropdown>
81+
<Dropdown v-slots={menuSlots}>
6082
<div>
6183
<img src={UserIcon} class={styles['user-head']} />
62-
<a class={styles['user-name']}>admin</a>
84+
<a class={styles['user-name']}>
85+
{getUserInfo['value']['username']}
86+
</a>
6387
</div>
6488
</Dropdown>
6589
</div>
6690
</>
6791
),
6892
}
93+
6994
return () => (
7095
<Layout class={styles['level-layout']}>
7196
<GlobalHeader v-slots={slots}></GlobalHeader>

‎src/layouts/SimplifyBasicLayout.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { defineComponent, computed } from 'vue'
2+
import { CommonStore } from '@/store/modules/common'
3+
import { storeToRefs } from 'pinia'
4+
import { Layout, Dropdown, Menu } from 'ant-design-vue'
5+
import { GlobalHeader, Menus } from '@/components/GlobalHeader'
6+
import { RouterView, RouteRecordRaw, useRouter, useRoute } from 'vue-router'
7+
8+
import styles from './index.module.less'
9+
import UserIcon from '../assets/user.png'
10+
11+
const SimplifyBasicLayout = defineComponent({
12+
name: 'SimplifyBasicLayout',
13+
setup() {
14+
const router = useRouter()
15+
const common = CommonStore()
16+
// common store data
17+
const { getUserInfo } = storeToRefs(common)
18+
19+
// 获取路由列表
20+
const getMenus = () => {
21+
let menuList: RouteRecordRaw[] = []
22+
const routes: Array<RouteRecordRaw> = router.options?.routes || []
23+
routes.forEach((item) => {
24+
if (item.path == '/') {
25+
menuList = item.children || []
26+
}
27+
})
28+
return JSON.parse(JSON.stringify(menuList))
29+
}
30+
31+
// 获取显示状态的路由
32+
const menuLists = computed(() => {
33+
return getMenus().filter((item: any) => !item?.meta?.hidden)
34+
})
35+
36+
// 退出
37+
const exit = () => {
38+
sessionStorage.clear()
39+
router.push('/login')
40+
}
41+
42+
const menuSlots = {
43+
overlay: () => (
44+
<Menu>
45+
<Menu.Item>
46+
<span onClick={exit}>退出</span>
47+
</Menu.Item>
48+
</Menu>
49+
),
50+
}
51+
52+
const slots = {
53+
content: () => (
54+
<>
55+
{/* 用户信息 */}
56+
<div class={styles['user-info']}>
57+
<Dropdown v-slots={menuSlots}>
58+
<div>
59+
<img src={UserIcon} class={styles['user-head']} />
60+
<a class={styles['user-name']}>
61+
{getUserInfo['value']['username']}
62+
</a>
63+
</div>
64+
</Dropdown>
65+
</div>
66+
</>
67+
),
68+
}
69+
return () => (
70+
<Layout class={styles['level-layout']}>
71+
<GlobalHeader v-slots={slots}></GlobalHeader>
72+
<div class={styles['level-content']}>
73+
{/* 导航栏 */}
74+
<div class={styles['vertical-sub-menu']}>
75+
<Menus menuLists={menuLists['value']} mode="inline"></Menus>
76+
</div>
77+
<Layout.Content>
78+
<RouterView />
79+
</Layout.Content>
80+
</div>
81+
</Layout>
82+
)
83+
},
84+
})
85+
86+
export default SimplifyBasicLayout

‎src/layouts/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import LevelBasicLayout from './LevelBasicLayout'
2+
import SimplifyBasicLayout from './SimplifyBasicLayout'
23
import RouteLayout from './RouteLayout'
34
import BlankLayout from './BlankLayout'
45

5-
export { LevelBasicLayout, RouteLayout, BlankLayout }
6+
export { LevelBasicLayout, SimplifyBasicLayout, RouteLayout, BlankLayout }

‎src/main.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { createApp } from 'vue'
2-
import { store, key } from './store'
2+
import store from './store'
33
import router from './router'
44
import moment from 'moment'
55
import App from './App'
6-
import { setupAntd } from './plugins/antd'
6+
import Antd from 'ant-design-vue'
77

88
moment.locale('zh-cn')
99

@@ -16,8 +16,4 @@ import 'ant-design-vue/dist/antd.css'
1616

1717
const app = createApp(App)
1818

19-
setupAntd(app)
20-
app.use(router)
21-
app.use(store, key)
22-
23-
app.mount('#app')
19+
app.use(router).use(Antd).use(store).mount('#app')

‎src/router/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import {
77
NavigationGuardNext,
88
Router,
99
} from 'vue-router'
10-
import { mainRoutes, baseRoutes } from './router.config'
11-
import { getToken } from '@/utils/token'
10+
import { mainRoutes, baseRoutes, Routes } from './router.config'
11+
import { getToken } from '@/utils/util'
1212
import { getPermissionsList } from '@/api/user'
1313
import { RouteLayout, BlankLayout } from '@/layouts'
1414

@@ -78,8 +78,8 @@ router.beforeEach(
7878
menu.menuList || [],
7979
[],
8080
)
81-
console.log(menuRoutes)
82-
mainRoutes.children?.unshift(...menuRoutes)
81+
mainRoutes.children = []
82+
mainRoutes.children?.unshift(...menuRoutes, ...Routes)
8383
// 动态添加路由
8484
router.addRoute(mainRoutes)
8585
// 注：这步很关键，不然导航获取不到路由

‎src/router/router.config.ts‎

Lines changed: 27 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,37 @@
11
import { RouteRecordRaw } from 'vue-router'
2-
import { LevelBasicLayout, RouteLayout } from '@/layouts'
2+
import { SimplifyBasicLayout, RouteLayout } from '@/layouts'
33

44
// 导航路由
5-
const Routes: Array<RouteRecordRaw> = []
5+
const Routes: Array<RouteRecordRaw> = [
6+
{
7+
path: '/403',
8+
name: '403',
9+
component: () =>
10+
import(/* webpackChunkName: "403" */ '@/views/exception/403'),
11+
meta: { title: '403', permission: ['exception'], hidden: true },
12+
},
13+
{
14+
path: '/404',
15+
name: '404',
16+
component: () =>
17+
import(/* webpackChunkName: "404" */ '@/views/exception/404'),
18+
meta: { title: '404', permission: ['exception'], hidden: true },
19+
},
20+
{
21+
path: '/500',
22+
name: '500',
23+
component: () =>
24+
import(/* webpackChunkName: "500" */ '@/views/exception/500'),
25+
meta: { title: '500', permission: ['exception'], hidden: true },
26+
},
27+
]
628

729
// 主路由
830
const mainRoutes: RouteRecordRaw = {
931
path: '/',
1032
redirect: '/login',
11-
component: LevelBasicLayout,
12-
children: [
13-
// ...Routes,
14-
{
15-
path: '/403',
16-
name: '403',
17-
component: () =>
18-
import(/* webpackChunkName: "403" */ '@/views/exception/403'),
19-
meta: { title: '403', permission: ['exception'], hidden: true },
20-
},
21-
{
22-
path: '/404',
23-
name: '404',
24-
component: () =>
25-
import(/* webpackChunkName: "404" */ '@/views/exception/404'),
26-
meta: { title: '404', permission: ['exception'], hidden: true },
27-
},
28-
{
29-
path: '/500',
30-
name: '500',
31-
component: () =>
32-
import(/* webpackChunkName: "500" */ '@/views/exception/500'),
33-
meta: { title: '500', permission: ['exception'], hidden: true },
34-
},
35-
// {
36-
// path: '/:pathMatch(.*)*',
37-
// redirect: { name: '404' },
38-
// },
39-
],
33+
component: SimplifyBasicLayout,
34+
children: [],
4035
}
4136

4237
// 基础路由
@@ -49,4 +44,4 @@ const baseRoutes: Array<RouteRecordRaw> = [
4944
},
5045
]
5146

52-
export { mainRoutes, baseRoutes }
47+
export { mainRoutes, baseRoutes, Routes }

‎src/store/index.ts‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
import { InjectionKey } from 'vue'
2-
import { createStore, Store } from 'vuex'
3-
import common from './modules/common'
1+
import { createPinia } from 'pinia'
2+
import piniaPluginPersist from 'pinia-plugin-persist'
43

5-
export interface State {}
4+
const store = createPinia().use(piniaPluginPersist)
65

7-
export const key: InjectionKey<Store<State>> = Symbol()
8-
9-
export const store = createStore<State>({
10-
modules: { common },
11-
})
6+
export default store

‎src/store/modules/common.ts‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1-
interface State {
2-
count: number
3-
}
1+
import { defineStore } from 'pinia'
42

5-
const initPageState = () => {
6-
return {
7-
count: 1,
8-
}
9-
}
10-
11-
const common = {
12-
state: initPageState(),
3+
export const CommonStore = defineStore('common', {
4+
// 状态库
5+
state: () => ({
6+
userInfo: {}, //用户信息
7+
}),
138
getters: {
14-
getCount: (state: State) => state.count,
9+
getUserInfo: (state) => state.userInfo?.userInfo,
1510
},
16-
mutations: {
17-
setCountNum(state: State) {
18-
state.count++
11+
actions: {
12+
setUserInfo<T>(data: T) {
13+
this.userInfo = data
1914
},
2015
},
21-
}
22-
23-
export default common
16+
persist: {
17+
enabled: true,
18+
strategies: [
19+
{
20+
//storage: localStorage,
21+
paths: ['userInfo'],
22+
},
23+
],
24+
},
25+
})

‎src/utils/fetch.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import axios, { AxiosRequestConfig, AxiosResponse, AxiosInstance } from 'axios'
2-
import { getToken, removeToken } from './token'
2+
import { getToken } from './util'
33
import { Modal } from 'ant-design-vue'
44
import { Message, Notification } from '@/utils/resetMessage'
55

@@ -37,7 +37,7 @@ service.interceptors.response.use(
3737
title: 'token出错',
3838
content: 'token失效，请重新登录！',
3939
onOk: () => {
40-
removeToken()
40+
sessionStorage.clear()
4141
},
4242
})
4343
} else if (code == 200) {

0 commit comments

Comments
 (0)