lisang
/
vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 修改vuex为pinia 

修改vuex为pinia
This commit is contained in:
zc 2021-12-25 13:26:12 +08:00
parent d53c13ecba
commit 41cba750b5
17 changed files with 179 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
README.md
View File

@ -67,44 +67,60 @@ export default router
- [路由的 hash 模式和 history 模式的区别](https://www.cnblogs.com/GGbondLearn/p/12239651.html)
## vuex
## pinia
```shell
npm install vuex@next
npm install pinia
```
src 下创建 store/interface.ts
src 下创建 store/index.ts
```typescript
import {InjectionKey} from 'vue'
import {createStore, Store} from 'vuex'
import { createPinia } from "pinia";
const store = createPinia();
export { store };
```
## main.ts
export interface State {
count: number
```typescript
import {createApp} from 'vue'
import App from './App.vue'
import router from "./router";
import '@/styles/index.scss'
import { store } from "./store";
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import 'virtual:svg-icons-register';
// @see https://blog.csdn.net/qq_37213281/article/details/121422027
import * as ElIconModules from '@element-plus/icons'
import '@/permission'
import Pagination from '@/components/Pagination/index.vue'
import {getDictItemsByCode} from '@/api/system/dict'
const app = createApp(App)
// 统一注册el-icon图标
// @link https://blog.csdn.net/Alloom/article/details/119415984
for (let iconName in ElIconModules) {
app.component(iconName, (ElIconModules as any)[iconName])
}
export const key: InjectionKey<Store<State>> = Symbol()
// 全局方法
app.config.globalProperties.$getDictItemsByCode = getDictItemsByCode
app.component('Pagination', Pagination) // 全局组件
.use(store)
.use(router)
.use(ElementPlus, {locale})
.mount('#app')
export const store = createStore<State>({
state() {
return {
count: 0
}
},
mutations: {
increment(state: { count: number }) {
state.count++
}
}
})
```
**参考文档：**
- [Vue3 的 InjectionKey 解决提供者和消费者同步注入值的类型](https://www.jianshu.com/p/7064c5f8f143)
## element-plus

2
package.json
View File

@ -13,7 +13,7 @@
"nprogress": "^0.2.0",
"path-browserify": "^1.0.1",
"path-to-regexp": "^6.2.0",
"pinia": "^2.0.6",
"pinia": "^2.0.9",
"screenfull": "^6.0.0",
"vue": "^3.2.16",
"vue-router": "^4.0.12",

8
src/layout/components/AppMain.vue
View File

@ -13,15 +13,13 @@
<script lang="ts">
import {defineComponent} from "vue";
import {useStore} from '@/store'
import {useRoute} from "vue-router";
import {tagsViewStoreHook} from '@/store/modules/tagsView'
export default defineComponent({
setup() {
const store = useStore()
const route = useRoute()
const cachedViews = () => {
return store.state.tagsView.cachedViews
return tagsViewStoreHook().cachedViews
}
const key = () => {
return route.path
@ -68,4 +66,4 @@ export default defineComponent({
padding-right: 15px;
}
}
</style>
</style>

16
src/layout/components/Navbar.vue
View File

@ -48,12 +48,13 @@
</template>
<script>
import {reactive, computed, toRefs} from "vue";
import {useStore} from "@/store";
import {useRoute, useRouter} from "vue-router"
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import Hamburger from '@/components/Hamburger/index.vue'
import Screenfull from '@/components/screenfull/index.vue'
import {tagsViewStoreHook} from '@/store/modules/tagsView'
import {useAppStoreHook} from '@/store/modules/app'
import {useUserStoreHook} from '@/store/modules/user'
export default {
components: {
Breadcrumb,
@ -61,26 +62,25 @@ export default {
Screenfull
},
setup() {
const store = useStore()
const route = useRoute()
const router = useRouter()
const sidebar = computed(() => {
return store.state.app.sidebar
return useAppStoreHook().sidebar
})
const device = computed(() => {
return store.state.app.device
return useAppStoreHook().device
})
const avatar = computed(() => {
return store.state.user.avatar
return useUserStoreHook().avatar
})
const state = reactive({
toggleSideBar: () => {
store.dispatch('app/toggleSideBar', false)
useAppStoreHook().toggleSidebar(false)
},
logout: () => {
store.dispatch('user/logout').then(()=>{
useUserStoreHook().logout().then(()=>{
router.push(`/login?redirect=${route.fullPath}`)
})
}

20
src/layout/components/Settings/index.vue
View File

@ -29,30 +29,30 @@
<script>
import ThemePicker from '@/components/ThemePicker/index.vue'
import {defineComponent, reactive, toRefs, watch} from "vue"
import {useStore} from '@/store'
// import {useStore} from '@/store'
import { useSettingStoreHook } from "@/store/modules/settings";
export default defineComponent({
components: {ThemePicker},
setup() {
const store = useStore()
// const store = useStore()
const state = reactive({
fixedHeader:store.state.settings.fixedHeader,
tagsView:store.state.settings.tagsView,
sidebarLogo:store.state.settings.sidebarLogo,
fixedHeader:useSettingStoreHook().fixedHeader,
tagsView:useSettingStoreHook().tagsView,
sidebarLogo:useSettingStoreHook().sidebarLogo,
themeChange: (val) => {
store.dispatch('settings/changeSetting', { key: 'theme', val })
useSettingStoreHook().changeSetting( { key: 'theme', val })
}
})
watch(()=>state.fixedHeader,(value)=>{
store.dispatch('settings/changeSetting',{ key: 'fixedHeader', value })
useSettingStoreHook().changeSetting( { key: 'fixedHeader', value })
})
watch(() => state.tagsView, (value) => {
store.dispatch('settings/changeSetting', { key: 'showTagsView', value })
useSettingStoreHook().changeSetting( { key: 'showTagsView', value })
})
watch(() => state.sidebarLogo, (value) => {
store.dispatch('settings/changeSetting', { key: 'sidebarLogo', value })
useSettingStoreHook().changeSetting( { key: 'sidebarLogo', value })
})
return {

13
src/layout/components/Sidebar/index.vue
View File

@ -34,7 +34,9 @@ import {computed, defineComponent} from "vue";
import SidebarItem from './SidebarItem.vue'
import Logo from './Logo.vue'
import variables from '@/styles/variables.scss'
import {useStore} from '@/store'
import { useSettingStoreHook } from "@/store/modules/settings";
import { useAppStoreHook } from "@/store/modules/app";
import { usePermissionStoreHook } from "@/store/modules/permission";
import {useRoute} from 'vue-router'
export default defineComponent({
@ -43,11 +45,10 @@ export default defineComponent({
Logo
},
setup() {
const store = useStore();
const route = useRoute()
const sidebar = computed(() => store.state.app.sidebar)
const routes = computed(() => store.state.permission.routes)
const showLogo = computed(() => store.state.settings.sidebarLogo)
const sidebar = computed(() => useAppStoreHook().sidebar)
const routes = computed(() => usePermissionStoreHook().routes)
const showLogo = computed(() => useSettingStoreHook().sidebarLogo)
const activeMenu = computed(() => {
const {meta, path} = route
// if set path, the sidebar will highlight the path you set
@ -56,7 +57,7 @@ export default defineComponent({
}
return path
})
const isCollapse = computed(() => !store.state.app.sidebar.opened)
const isCollapse = computed(() => !useAppStoreHook().sidebar.opened)
return {
sidebar,

28
src/layout/components/TagsView/index.vue
View File

@ -32,10 +32,10 @@
<script lang="ts">
import {Close} from '@element-plus/icons'
import {tagsViewStoreHook} from '@/store/modules/tagsView'
import {usePermissionStoreHook} from '@/store/modules/Permission'
import ScrollPane from './ScrollPane.vue'
import path from 'path-browserify'
import {useStore} from "@store";
import {
defineComponent,
computed,
@ -53,7 +53,6 @@ import {TagView} from "@store/interface";
export default defineComponent({
components: {ScrollPane,Close},
setup() {
const store = useStore()
const router = useRouter()
const instance = getCurrentInstance()
const currentRoute = useRoute()
@ -86,7 +85,7 @@ export default defineComponent({
return tag.meta && tag.meta.affix
},
refreshSelectedTag: (view: TagView) => {
store.dispatch('tagsView/delCachedView', view)
tagsViewStoreHook().delCachedView(view)
const { fullPath } = view
nextTick(() => {
router.replace({ path: '/redirect' + fullPath }).catch(err => {
@ -95,23 +94,24 @@ export default defineComponent({
})
},
closeSelectedTag: (view: TagView) => {
store.dispatch('tagsView/delView', view)
tagsViewStoreHook().delView(view);
if (state.isActive(view)) {
toLastView(store.state.tagsView.visitedViews, view)
toLastView(tagsViewStoreHook().visitedViews, view)
}
},
closeOthersTags: () => {
if (state.selectedTag.fullPath !== currentRoute.path && state.selectedTag.fullPath !== undefined) {
router.push(state.selectedTag.fullPath)
}
store.dispatch('tagsView/delOthersViews', state.selectedTag as TagView)
tagsViewStoreHook().delOthersViews(state.selectedTag as TagView)
},
closeAllTags: (view: TagView) => {
store.dispatch('tagsView/delAllViews', undefined)
tagsViewStoreHook().delAllViews(undefined);
if (state.affixTags.some(tag => tag.path === currentRoute.path)) {
return
}
toLastView(store.state.tagsView.visitedViews, view)
toLastView(tagsViewStoreHook().visitedViews, view)
},
openMenu: (tag: TagView, e: MouseEvent) => {
const menuMinWidth = 105
@ -138,9 +138,9 @@ export default defineComponent({
})
const visitedViews = computed(() => {
return store.state.tagsView.visitedViews
return tagsViewStoreHook().visitedViews
})
const routes = computed(() => store.state.permission.routes)
const routes = computed(() =>usePermissionStoreHook().routes)
const filterAffixTags = (routes: RouteRecordRaw[], basePath = '/') => {
let tags: TagView[] = []
@ -171,14 +171,14 @@ export default defineComponent({
for (const tag of state.affixTags) {
// Must have tag name
if (tag.name) {
store.dispatch('tagsView/addVisitedView', tag as TagView)
tagsViewStoreHook().addVisitedView(tag as TagView)
}
}
}
const addTags = () => {
if (currentRoute.name) {
store.dispatch('tagsView/addView', currentRoute)
tagsViewStoreHook().addView(currentRoute)
}
return false
}
@ -192,7 +192,7 @@ export default defineComponent({
(scrollPaneRef.value as any).moveToCurrentTag(tag)
// When query is different then update
if ((tag.to as TagView).fullPath !== currentRoute.fullPath) {
store.dispatch('tagsView/updateVisitedView', currentRoute)
tagsViewStoreHook().updateVisitedView(currentRoute)
}
}
}

38
src/layout/index.vue
View File

@ -21,9 +21,9 @@
<script>
import {computed, defineComponent, onBeforeMount, onBeforeUnmount, onMounted, reactive, toRefs, watch} from "vue";
import {AppMain, Navbar, Settings, Sidebar, TagsView} from './components/index.ts'
import {useStore} from "@store";
import {useRoute} from "vue-router";
import {useRoute} from "vue-router";
import { useAppStoreHook } from "@/store/modules/app";
import { useSettingStoreHook } from "@/store/modules/settings";
const {body} = document
const WIDTH = 992
@ -37,9 +37,7 @@ export default defineComponent({
TagsView
},
setup() {
const store = useStore()
const sidebar = computed(() => store.state.app.sidebar)
const sidebar = computed(() => useAppStoreHook().sidebar)
const isMobile = () => {
const rect = body.getBoundingClientRect()
return rect.width - 1 < WIDTH
@ -47,17 +45,17 @@ export default defineComponent({
const resizeHandler = () => {
if (!document.hidden) {
store.dispatch('app/toggleDevice', isMobile() ? 'mobile' : 'desktop')
useAppStoreHook().toggleSidebar( isMobile() ? 'mobile' : 'desktop')
if (isMobile()) {
store.dispatch('app/closeSideBar', {withoutAnimation: true})
useAppStoreHook().closeSideBar({withoutAnimation: true});
}
}
}
const resizeMounted = () => {
if (isMobile()) {
store.dispatch('app/toggleDevice', 'mobile')
store.dispatch('app/closeSideBar', {withoutAnimation: true})
useAppStoreHook().toggleDevice( 'mobile' )
useAppStoreHook().toggleSidebar({withoutAnimation: true});
}
}
const addEventListenerOnResize = () => {
@ -70,35 +68,35 @@ export default defineComponent({
const currentRoute = useRoute()
const watchRouter = watch(() => currentRoute.name, () => {
if (store.state.app.device === 'mobile' && store.state.app.sidebar.opened) {
store.dispatch('app/closeSideBar', false)
if (useAppStoreHook().device === 'mobile' && useAppStoreHook().sidebar.opened) {
useAppStoreHook().closeSideBar(false)
}
})
const state = reactive({
handleClickOutside: () => {
store.dispatch('app/closeSideBar', false)
useAppStoreHook().closeSideBar(false)
}
})
const classObj = computed(() => {
return {
hideSidebar: !store.state.app.sidebar.opened,
openSidebar: store.state.app.sidebar.opened,
withoutAnimation: store.state.app.sidebar.withoutAnimation,
mobile: store.state.app.device === 'mobile'
hideSidebar: !useAppStoreHook().sidebar.opened,
openSidebar: useAppStoreHook().sidebar.opened,
withoutAnimation: useAppStoreHook().sidebar.withoutAnimation,
mobile: useAppStoreHook().device === 'mobile'
}
})
const showSettings = computed(() => {
return store.state.settings.showSettings
return useSettingStoreHook().showSettings
})
const needTagsView = computed(() => {
return store.state.settings.tagsView
return useSettingStoreHook().tagsView
})
const fixedHeader = computed(() => {
return store.state.settings.fixedHeader
return useSettingStoreHook().fixedHeader
})
watchRouter()

6
src/main.ts
View File

@ -1,10 +1,8 @@
import {createApp} from 'vue'
import App from './App.vue'
import router from "./router";
// import {store, key} from './store'
import { setupStore } from "@/store";
import '@/styles/index.scss'
import { store } from "./store";
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
@ -30,8 +28,8 @@ for (let iconName in ElIconModules) {
// 全局方法
app.config.globalProperties.$getDictItemsByCode = getDictItemsByCode
setupStore(app);
app.component('Pagination', Pagination) // 全局组件
.use(store)
.use(router)
.use(ElementPlus, {locale})
.mount('#app')

6
src/store/index.ts
View File

@ -1,9 +1,3 @@
import type { App } from "vue";
import { createPinia } from "pinia";
const store = createPinia();
export function setupStore(app: App<Element>) {
app.use(store);
}
export { store };

35
src/store/modules/app.ts
View File

@ -1,12 +1,7 @@
// import {Module} from "vuex";
import {AppState} from "@store/interface";
import {Local} from "@utils/storage";
// import { storageLocal } from "/@/utils/storage";
import { store } from "@/store";
// import { appType } from "./types";
import { defineStore } from "pinia";
// import { getConfig } from "/@/config";
export const useAppStore = defineStore({
id: "youlai-app",
@ -18,34 +13,24 @@ export const useAppStore = defineStore({
}
}),
actions: {
async TOGGLE_SIDEBAR(state:any) {
state.sidebar.opened = !state.sidebar.opened
console.log('state.sidebar.opened',state.sidebar.opened)
state.sidebar.withoutAnimation = false
if (state.sidebar.opened) {
toggleSidebar() {
this.sidebar.opened = !this.sidebar.opened
this.sidebar.withoutAnimation = false
if (this.sidebar.opened) {
Local.set('sidebarStatus', 1)
} else {
Local.set('sidebarStatus', 0)
}
},
async CLOSE_SIDEBAR (state:any, withoutAnimation:any) {
closeSideBar ( withoutAnimation:any) {
Local.set('sidebarStatus', 0)
state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation
this.sidebar.opened = false
this.sidebar.withoutAnimation = withoutAnimation
},
async TOGGLE_DEVICE(state:any, device:any) {
toggleDevice( device:any) {
console.log('TOGGLE_DEVICE',device)
state.device = device
},
// toggleSideBar({commit}) {
// commit('TOGGLE_SIDEBAR')
// },
// closeSideBar({commit}, {withoutAnimation}) {
// commit('CLOSE_SIDEBAR', withoutAnimation)
// },
// async toggleDevice({commit}, device) {
// commit('TOGGLE_DEVICE', device)
// }
this.device = device
}
}
})
export function useAppStoreHook() {

7
src/store/modules/permission.ts
View File

@ -1,5 +1,4 @@
// import {Module} from "vuex";
import {PermissionState, RootStateTypes} from "@store/interface";
import {PermissionState} from "@store/interface";
import {RouteRecordRaw} from 'vue-router'
import {constantRoutes} from '@/router'
import {listRoutes} from "@/api/system/menu";
@ -53,7 +52,7 @@ export const usePermissionStore = defineStore({
addRoutes: []
}),
actions: {
async SET_ROUTES( routes: RouteRecordRaw[]){
setRoutes( routes: RouteRecordRaw[]){
this.addRoutes = routes
this.routes = constantRoutes.concat(routes)
},
@ -67,7 +66,7 @@ export const usePermissionStore = defineStore({
} else {
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
this.SET_ROUTES(accessedRoutes)
this.setRoutes(accessedRoutes)
resolve(accessedRoutes)
}).catch(error => {
reject(error)

8
src/store/modules/settings.ts
View File

@ -1,7 +1,6 @@
import { defineStore } from "pinia";
import { store } from "@/store";
// import {Module} from "vuex";
import {SettingState, RootStateTypes} from "@store/interface";
import {SettingState} from "@store/interface";
import defaultSettings from '../../settings'
const {showSettings, tagsView, fixedHeader, sidebarLogo} = defaultSettings
@ -16,7 +15,7 @@ export const useSettingStore = defineStore({
sidebarLogo: sidebarLogo,
}),
actions: {
async CHANGE_SETTING( payload: { key: string, value: any }){
async changeSetting( payload: { key: string, value: any }){
const {key, value} = payload
switch (key) {
case 'theme':
@ -37,9 +36,6 @@ export const useSettingStore = defineStore({
default:
break
}
},
changeSetting(data:any) {
this.CHANGE_SETTING(data)
}
}
})

124
src/store/modules/tagsView.ts
View File

@ -1,8 +1,7 @@
import { defineStore } from "pinia";
import { store } from "@/store";
// import {Module} from "vuex";
import {TagsViewState,RootStateTypes} from "@store/interface";
import {TagsViewState} from "@store/interface";
const tagsViewStore=defineStore({
id:"youlai-tagsView",
@ -11,7 +10,7 @@ const tagsViewStore=defineStore({
cachedViews: []
}),
actions: {
async ADD_VISITED_VIEW ( view:any) {
addVisitedView ( view:any) {
if (this.visitedViews.some(v => v.path === view.path)) return
this.visitedViews.push(
Object.assign({}, view, {
@ -19,51 +18,58 @@ const tagsViewStore=defineStore({
})
)
},
async ADD_CACHED_VIEW(view:any) {
addCachedView(view:any) {
if (this.cachedViews.includes(view.name)) return
if (!view.meta.noCache) {
this.cachedViews.push(view.name)
}
},
async DEL_VISITED_VIEW( view:any) {
for (const [i, v] of this.visitedViews.entries()) {
if (v.path === view.path) {
this.visitedViews.splice(i, 1)
break
}
}
delVisitedView( view:any) {
return new Promise(resolve => {
for (const [i, v] of this.visitedViews.entries()) {
if (v.path === view.path) {
this.visitedViews.splice(i, 1)
break
}
}
resolve([...this.visitedViews])
})
},
async DEL_CACHED_VIEW ( view:any) {
const index = this.cachedViews.indexOf(view.name)
index > -1 && this.cachedViews.splice(index, 1)
delCachedView ( view:any) {
return new Promise(resolve => {
const index = this.cachedViews.indexOf(view.name)
index > -1 && this.cachedViews.splice(index, 1)
resolve([...this.cachedViews])
})
},
async DEL_OTHERS_VISITED_VIEWS (view:any) {
this.visitedViews = this.visitedViews.filter(v => {
return v.meta?.affix || v.path === view.path
})
delOthersVisitedViews (view:any) {
return new Promise(resolve => {
this.visitedViews = this.visitedViews.filter(v => {
return v.meta?.affix || v.path === view.path
})
resolve([...this.visitedViews])
})
},
async DEL_OTHERS_CACHED_VIEWS( view:any) {
const index = this.cachedViews.indexOf(view.name)
if (index > -1) {
this.cachedViews = this.cachedViews.slice(index, index + 1)
} else {
// if index = -1, there is no cached tags
this.cachedViews = []
}
delOthersCachedViews( view:any) {
return new Promise(resolve => {
const index = this.cachedViews.indexOf(view.name)
if (index > -1) {
this.cachedViews = this.cachedViews.slice(index, index + 1)
} else {
// if index = -1, there is no cached tags
this.cachedViews = []
}
resolve([...this.cachedViews])
})
},
DEL_ALL_VISITED_VIEWS() {
// keep affix tags
const affixTags = this.visitedViews.filter(tag => tag.meta?.affix)
this.visitedViews = affixTags
},
DEL_ALL_CACHED_VIEWS() {
this.cachedViews = []
},
UPDATE_VISITED_VIEW (view:any) {
updateVisitedView (view:any) {
for (let v of this.visitedViews) {
if (v.path === view.path) {
v = Object.assign(v, view)
@ -72,15 +78,9 @@ const tagsViewStore=defineStore({
}
},
addView( view:any) {
this.addVisitedView( view)
this.addVisitedView( view)
this.addCachedView(view)
},
addVisitedView( view:any) {
this.ADD_VISITED_VIEW( view)
},
addCachedView( view:any) {
this.ADD_CACHED_VIEW(view)
},
delView( view:any) {
return new Promise(resolve => {
this.delVisitedView(view)
@ -91,18 +91,6 @@ const tagsViewStore=defineStore({
})
})
},
delVisitedView( view:any) {
return new Promise(resolve => {
this.DEL_VISITED_VIEW( view)
resolve([...this.visitedViews])
})
},
delCachedView( view:any) {
return new Promise(resolve => {
this.DEL_CACHED_VIEW(view)
resolve([...this.cachedViews])
})
},
delOthersViews( view:any) {
return new Promise(resolve => {
this.delOthersVisitedViews(view)
@ -113,23 +101,11 @@ const tagsViewStore=defineStore({
})
})
},
delOthersVisitedViews( view:any) {
return new Promise(resolve => {
this.DEL_OTHERS_VISITED_VIEWS(view)
resolve([...this.visitedViews])
})
},
delOthersCachedViews( view:any) {
return new Promise(resolve => {
this.DEL_OTHERS_CACHED_VIEWS(view)
resolve([...this.cachedViews])
})
},
delAllViews( view:any) {
return new Promise(resolve => {
this.delAllVisitedViews()
this.delAllCachedViews()
const affixTags = this.visitedViews.filter(tag => tag.meta?.affix)
this.visitedViews = affixTags
this.cachedViews = []
resolve({
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews]
@ -138,19 +114,17 @@ const tagsViewStore=defineStore({
},
delAllVisitedViews() {
return new Promise(resolve => {
this.DEL_ALL_VISITED_VIEWS
const affixTags = this.visitedViews.filter(tag => tag.meta?.affix)
this.visitedViews = affixTags
resolve([...this.visitedViews])
})
},
delAllCachedViews() {
return new Promise(resolve => {
this.DEL_ALL_CACHED_VIEWS
this.cachedViews = []
resolve([...this.cachedViews])
})
},
updateVisitedView( view:any) {
this.UPDATE_VISITED_VIEW(view)
}
}
})

28
src/store/modules/user.ts
View File

@ -27,24 +27,8 @@ export const useUserStore = defineStore({
}),
actions: {
async RESET_STATE () {
// Object.assign(this.state, getDefaultState())
this.$reset()
},
async SET_TOKEN(token: string) {
this.token = token
},
async SET_NICKNAME( nickname: string) {
this.nickname = nickname
},
async SET_AVATAR(avatar: string) {
this.avatar = avatar
},
async SET_ROLES(roles: string[]) {
this.roles = roles
},
async SET_PERMS( perms: string[]) {
this.perms = perms
},
/**
* 用户登录请求
* @param userInfo 登录用户信息
@ -68,7 +52,7 @@ export const useUserStore = defineStore({
const {access_token, token_type} = response.data
const accessToken = token_type + " " + access_token
Local.set("token", accessToken)
this.SET_TOKEN(accessToken)
this.token = accessToken
resolve(access_token)
}).catch(error => {
reject(error)
@ -85,16 +69,14 @@ export const useUserStore = defineStore({
if (!data) {
return reject('Verification failed, please Login again.')
}
console.log(data)
const {nickname, avatar, roles, perms} = data
if (!roles || roles.length <= 0) {
reject('getUserInfo: roles must be a non-null array!')
}
this.SET_NICKNAME(nickname)
this.SET_AVATAR( avatar)
this.SET_ROLES( roles)
this.SET_PERMS( perms)
this.nickname = nickname
this.avatar = avatar
this.roles = roles
this.perms = perms
resolve(data)
}).catch(error => {
reject(error)

7
src/utils/request.ts
View File

@ -1,8 +1,7 @@
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import {Local} from "@utils/storage";
import {store} from "@store";
import { useUserStoreHook } from "@/store/modules/user";
// 创建 axios 实例
const service = axios.create({
@ -17,7 +16,7 @@ service.interceptors.request.use(
if (!config?.headers) {
throw new Error(`Expected 'config' and 'config.headers' not to be undefined`);
}
if (store.state.user.token) {
if (useUserStoreHook().token) {
config.headers.Authorization = `${Local.get('token')}`;
}
return config
@ -62,4 +61,4 @@ service.interceptors.response.use(
);
// 导出 axios 实例
export default service
export default service

4
src/views/login/index.vue
View File

@ -72,7 +72,7 @@
<script>
import SvgIcon from '@/components/SvgIcon/index.vue';
import {getCaptcha} from "@/api/login";
import { useUserStoreHook } from "@/store/modules/user";
export default {
name: 'Login',
components:{
@ -130,7 +130,7 @@ export default {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => {
useUserStoreHook().login(this.loginForm).then(() => {
this.$router.push({ path: this.redirect || '/' })
this.loading = false
}).catch(() => {