Merge branch 'master' of gitee.com:youlaitech/vue3-element-admin

README.md

@@ -67,43 +67,59 @@ 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 { createPinia } from "pinia";
-import {createStore, Store} from 'vuex'
+const store = createPinia();
-
+export { store };
-export interface State {
-    count: number
-}
-
-export const key: InjectionKey<Store<State>> = Symbol()
-
-
-export const store = createStore<State>({
-    state() {
-        return {
-            count: 0
-        }
-    },
-    mutations: {
-        increment(state: { count: number }) {
-            state.count++
-        }
-    }
-})
 ```
+  main.ts
 
-**参考文档：**
+```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';
 
-- [Vue3 的 InjectionKey 解决提供者和消费者同步注入值的类型](https://www.jianshu.com/p/7064c5f8f143)
 
+// @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])
+}
+
+// 全局方法
+app.config.globalProperties.$getDictItemsByCode = getDictItemsByCode
+app.component('Pagination', Pagination) // 全局组件
+     .use(store)
+    .use(router)
+    .use(ElementPlus, {locale})
+    .mount('#app')
+
+```
 
 
 ## element-plus

package.json

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

src/layout/components/AppMain.vue

@@ -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

src/layout/components/Navbar.vue

@@ -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}`)
         })
       }

src/layout/components/Settings/index.vue

@@ -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,
+      fixedHeader:useSettingStoreHook().fixedHeader,
-      tagsView:store.state.settings.tagsView,
+      tagsView:useSettingStoreHook().tagsView,
-      sidebarLogo:store.state.settings.sidebarLogo,
+      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 {

src/layout/components/Sidebar/index.vue

@@ -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 sidebar = computed(() => useAppStoreHook().sidebar)
-    const routes = computed(() => store.state.permission.routes)
+    const routes = computed(() => usePermissionStoreHook().routes)
-    const showLogo = computed(() => store.state.settings.sidebarLogo)
+    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,

src/layout/components/TagsView/index.vue

@@ -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)
             }
           }
         }

src/layout/index.vue

@@ -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 { 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(() => useAppStoreHook().sidebar)
-
-    const sidebar = computed(() => store.state.app.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')
+        useAppStoreHook().toggleDevice(  'mobile' )
-        store.dispatch('app/closeSideBar', {withoutAnimation: true})
+        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) {
+      if (useAppStoreHook().device === 'mobile' && useAppStoreHook().sidebar.opened) {
-        store.dispatch('app/closeSideBar', false)
+        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,
+        hideSidebar:  !useAppStoreHook().sidebar.opened,
-        openSidebar: store.state.app.sidebar.opened,
+        openSidebar: useAppStoreHook().sidebar.opened,
-        withoutAnimation: store.state.app.sidebar.withoutAnimation,
+        withoutAnimation: useAppStoreHook().sidebar.withoutAnimation,
-        mobile: store.state.app.device === 'mobile'
+        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()

src/main.ts

@@ -1,9 +1,8 @@
 import {createApp} from 'vue'
 import App from './App.vue'
 import router from "./router";
-import {store, key} 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'
@@ -29,10 +28,8 @@ for (let iconName in ElIconModules) {
 
 // 全局方法
 app.config.globalProperties.$getDictItemsByCode = getDictItemsByCode
-
+app.component('Pagination', Pagination) // 全局组件
-app
+     .use(store)
-    .component('Pagination', Pagination) // 全局组件
     .use(router)
-    .use(store, key)
     .use(ElementPlus, {locale})
     .mount('#app')

src/permission.ts

@@ -1,8 +1,8 @@
 import router from "@router";
 import NProgress from 'nprogress';
 import {ElMessage} from "element-plus";
-import {store} from "@store";
+import { usePermissionStoreHook } from "@/store/modules/permission";
-
+import { useUserStoreHook } from "@/store/modules/user";
 NProgress.configure({showSpinner: false})
 
 // 白名单
@@ -11,28 +11,28 @@ const whiteList = ['/login', '/auth-redirect']
 router.beforeEach(async (to, form, next) => {
     NProgress.start()
 
-    const hasToken = store.state.user.token
+    const hasToken =useUserStoreHook().token
     if (hasToken) {
         // 如果登录成功，跳转到首页
         if (to.path === '/login') {
             next({path: '/'})
             NProgress.done()
         } else {
-            const hasGetUserInfo = store.state.user.roles.length > 0
+            const hasGetUserInfo =useUserStoreHook().roles.length > 0
             if (hasGetUserInfo) {
                 next()
             } else {
                 try {
-                    await store.dispatch('user/getUserInfo')
+                    await useUserStoreHook().getUserInfo()
-                    const roles = store.state.user.roles
+                    const roles =useUserStoreHook().roles
-                    const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+                    const accessRoutes:any = await usePermissionStoreHook().generateRoutes(roles)
                     accessRoutes.forEach((route: any) => {
                         router.addRoute(route)
                     })
                     next({...to, replace: true})
                 } catch (error) {
                     // remove token and go to login page to re-login
-                    await store.dispatch('user/resetToken')
+                    await useUserStoreHook().resetToken()
                     ElMessage.error(error as any || 'Has Error')
                     next(`/login?redirect=${to.path}`)
                     NProgress.done()

src/store/index.ts

@@ -1,27 +1,3 @@
-import {InjectionKey} from 'vue'
+import { createPinia } from "pinia";
-import {createStore,useStore as baseUseStore ,Store} from 'vuex'
+const store = createPinia();
-import {RootStateTypes} from "@store/interface";
+export { store };
-
-// Vite 使用特殊的 import.meta.glob 函数从文件系统导入多个模块
-// @see https://cn.vitejs.dev/guide/features.html#glob-import
-const moduleFiles = import.meta.globEager('./modules/*.ts')
-const paths:string[]=[]
-
-for (const path in moduleFiles) {
-    paths.push(path)
-}
-
-const modules = paths.reduce((modules: { [x: string]: any }, modulePath: string) => {
-    const moduleKey = modulePath.replace(/^\.\/modules\/(.*)\.\w+$/, '$1');
-    modules[moduleKey] = moduleFiles[modulePath].default;
-    return modules;
-}, {});
-
-export const key: InjectionKey<Store<RootStateTypes>> = Symbol()
-
-export const store = createStore<RootStateTypes>({modules})
-
-export function useStore(){
-    return baseUseStore(key)
-}
-

src/store/modules/app.ts

@@ -1,49 +1,38 @@
-import {Module} from "vuex";
+import {AppState} from "@store/interface";
-import {AppState,RootStateTypes} from "@store/interface";
 import {Local} from "@utils/storage";
+import { store } from "@/store";
+import { defineStore } from "pinia";
 
-const appModule: Module<AppState, RootStateTypes> = {
+export const useAppStore = defineStore({
-    namespaced: true,
+    id: "youlai-app",
-    state: {
+    state: ():AppState=>({
         device: 'desktop',
         sidebar: {
             opened: Local.get('sidebarStatus') ? !!+Local.get('sidebarStatus') : true,
             withoutAnimation: false
         }
-    },
+    }),
-    mutations: {
+    actions: {
-        TOGGLE_SIDEBAR: state => {
+         toggleSidebar() {
-            state.sidebar.opened = !state.sidebar.opened
+            this.sidebar.opened = !this.sidebar.opened
-            console.log('state.sidebar.opened',state.sidebar.opened)
+            this.sidebar.withoutAnimation = false
-            state.sidebar.withoutAnimation = false
+            if (this.sidebar.opened) {
-            if (state.sidebar.opened) {
                 Local.set('sidebarStatus', 1)
             } else {
                 Local.set('sidebarStatus', 0)
             }
         },
-        CLOSE_SIDEBAR: (state, withoutAnimation) => {
+         closeSideBar ( withoutAnimation:any) {
             Local.set('sidebarStatus', 0)
-            state.sidebar.opened = false
+            this.sidebar.opened = false
-            state.sidebar.withoutAnimation = withoutAnimation
+            this.sidebar.withoutAnimation = withoutAnimation
         },
-        TOGGLE_DEVICE: (state, device) => {
+        toggleDevice( device:any) {
             console.log('TOGGLE_DEVICE',device)
-            state.device = device
+            this.device = device
-        }
-    },
-    actions: {
-        toggleSideBar({commit}) {
-            commit('TOGGLE_SIDEBAR')
-        },
-        closeSideBar({commit}, {withoutAnimation}) {
-            commit('CLOSE_SIDEBAR', withoutAnimation)
-        },
-       async toggleDevice({commit}, device) {
-            commit('TOGGLE_DEVICE', device)
         }
     }
+})
+export function useAppStoreHook() {
+    return useAppStore(store);
 }
-
-export default appModule;
-

src/store/modules/permission.ts

@@ -1,9 +1,9 @@
-import {Module} from "vuex";
+import {PermissionState} from "@store/interface";
-import {PermissionState, RootStateTypes} from "@store/interface";
 import {RouteRecordRaw} from 'vue-router'
 import {constantRoutes} from '@/router'
 import {listRoutes} from "@/api/system/menu";
-
+import { defineStore } from "pinia";
+import { store } from "@/store";
 const modules = import.meta.glob("../../views/**/**.vue");
 export const Layout = () => import( '@/layout/index.vue')
 
@@ -45,20 +45,18 @@ export const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) =>
 }
 
 
-const permissionModule: Module<PermissionState, RootStateTypes> = {
+export const usePermissionStore = defineStore({
-    namespaced: true,
+    id:"youlai-permission",
-    state: {
+    state:():PermissionState=>( {
         routes: [],
         addRoutes: []
-    },
+    }),
-    mutations: {
-        SET_ROUTES: (state: PermissionState, routes: RouteRecordRaw[]) => {
-            state.addRoutes = routes
-            state.routes = constantRoutes.concat(routes)
-        }
-    },
     actions: {
-        generateRoutes({commit}, roles: string[]) {
+         setRoutes( routes: RouteRecordRaw[]){
+          this.addRoutes = routes
+         this.routes = constantRoutes.concat(routes)
+        },
+         generateRoutes( roles: string[]) {
             return new Promise((resolve, reject) => {
                 listRoutes().then(response => {
                     const asyncRoutes = response.data
@@ -68,7 +66,7 @@ const permissionModule: Module<PermissionState, RootStateTypes> = {
                     } else {
                         accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
                     }
-                    commit('SET_ROUTES', accessedRoutes)
+                    this.setRoutes(accessedRoutes)
                     resolve(accessedRoutes)
                 }).catch(error => {
                     reject(error)
@@ -76,5 +74,7 @@ const permissionModule: Module<PermissionState, RootStateTypes> = {
             })
         }
     }
+})
+export function usePermissionStoreHook() {
+    return usePermissionStore(store);
 }
-export default permissionModule;

src/store/modules/settings.ts

@@ -1,49 +1,46 @@
-import {Module} from "vuex";
+import { defineStore } from "pinia";
-import {SettingState, RootStateTypes} from "@store/interface";
+import { store } from "@/store";
+import {SettingState} from "@store/interface";
 import defaultSettings from '../../settings'
 
 const {showSettings, tagsView, fixedHeader, sidebarLogo} = defaultSettings
 
-const settingModule: Module<SettingState, RootStateTypes> = {
+export const useSettingStore = defineStore({
-    namespaced: true,
+    id: "pure-setting",
-    state: {
+    state:():SettingState =>({
         theme: '',
         showSettings: showSettings,
         tagsView: tagsView,
         fixedHeader: fixedHeader,
         sidebarLogo: sidebarLogo,
-    },
+    }),
-    mutations: {
+    actions: {
-        CHANGE_SETTING: (state: SettingState, payload: { key: string, value: any }) => {
+        async changeSetting( payload: { key: string, value: any }){
             const {key, value} = payload
             switch (key) {
                 case 'theme':
-                    state.theme = value
+                   this.theme = value
                     break
                 case 'showSettings':
-                    state.showSettings = value
+                    this.showSettings = value
                     break
                 case 'fixedHeader':
-                    state.fixedHeader = value
+                    this.fixedHeader = value
                     break
                 case 'tagsView':
-                    state.tagsView = value
+                    this.tagsView = value
                     break
                 case 'sidebarLogo':
-                    state.sidebarLogo = value
+                    this.sidebarLogo = value
                     break
                 default:
                     break
             }
         }
-    },
-    actions: {
-        changeSetting({commit}, data) {
-            commit('CHANGE_SETTING', data)
-        }
     }
+})
+
+export function useSettingStoreHook() {
+    return useSettingStore(store);
 }
 
-export default settingModule;
-
-

src/store/modules/tagsView.ts

@@ -1,158 +1,135 @@
 
-import {Module} from "vuex";
+import { defineStore } from "pinia";
-import {TagsViewState,RootStateTypes} from "@store/interface";
+import { store } from "@/store";
+import {TagsViewState} from "@store/interface";
 
-const tagsViewModule: Module<TagsViewState, RootStateTypes> = {
+const tagsViewStore=defineStore({
-    namespaced: true,
+    id:"youlai-tagsView",
-    state: {
+    state:():TagsViewState=>( {
         visitedViews: [],
         cachedViews: []
-    },
+    }),
-    mutations: {
+    actions: {
-        ADD_VISITED_VIEW: (state, view) => {
+         addVisitedView ( view:any) {
-            if (state.visitedViews.some(v => v.path === view.path)) return
+            if (this.visitedViews.some(v => v.path === view.path)) return
-            state.visitedViews.push(
+            this.visitedViews.push(
                 Object.assign({}, view, {
                     title: view.meta?.title || 'no-name'
                 })
             )
         },
-        ADD_CACHED_VIEW: (state, view) => {
+          addCachedView(view:any) {
-            if (state.cachedViews.includes(view.name)) return
+            if (this.cachedViews.includes(view.name)) return
             if (!view.meta.noCache) {
-                state.cachedViews.push(view.name)
+                this.cachedViews.push(view.name)
             }
         },
 
-        DEL_VISITED_VIEW: (state, view) => {
+          delVisitedView( view:any) {
-            for (const [i, v] of state.visitedViews.entries()) {
+              return new Promise(resolve => {
+                  for (const [i, v] of this.visitedViews.entries()) {
                       if (v.path === view.path) {
-                    state.visitedViews.splice(i, 1)
+                          this.visitedViews.splice(i, 1)
                           break
                       }
                   }
+                  resolve([...this.visitedViews])
+              })
+
         },
-        DEL_CACHED_VIEW: (state, view) => {
+          delCachedView ( view:any)  {
-            const index = state.cachedViews.indexOf(view.name)
+              return new Promise(resolve => {
-            index > -1 && state.cachedViews.splice(index, 1)
+                  const index = this.cachedViews.indexOf(view.name)
+                  index > -1 && this.cachedViews.splice(index, 1)
+                  resolve([...this.cachedViews])
+              })
+
         },
 
-        DEL_OTHERS_VISITED_VIEWS: (state, view) => {
+         delOthersVisitedViews (view:any) {
-            state.visitedViews = state.visitedViews.filter(v => {
+             return new Promise(resolve => {
+                 this.visitedViews = this.visitedViews.filter(v => {
                      return v.meta?.affix || v.path === view.path
                  })
+                 resolve([...this.visitedViews])
+             })
+
         },
-        DEL_OTHERS_CACHED_VIEWS: (state, view) => {
+         delOthersCachedViews( view:any) {
-            const index = state.cachedViews.indexOf(view.name)
+             return new Promise(resolve => {
+                 const index = this.cachedViews.indexOf(view.name)
                  if (index > -1) {
-                state.cachedViews = state.cachedViews.slice(index, index + 1)
+                     this.cachedViews = this.cachedViews.slice(index, index + 1)
                  } else {
                      // if index = -1, there is no cached tags
-                state.cachedViews = []
+                     this.cachedViews = []
                  }
+                 resolve([...this.cachedViews])
+             })
+
         },
 
-        DEL_ALL_VISITED_VIEWS: state => {
+        updateVisitedView (view:any) {
-            // keep affix tags
+            for (let v of this.visitedViews) {
-            const affixTags = state.visitedViews.filter(tag => tag.meta?.affix)
-            state.visitedViews = affixTags
-        },
-        DEL_ALL_CACHED_VIEWS: state => {
-            state.cachedViews = []
-        },
-
-        UPDATE_VISITED_VIEW: (state, view) => {
-            for (let v of state.visitedViews) {
                 if (v.path === view.path) {
                     v = Object.assign(v, view)
                     break
                 }
             }
+        },
+        addView( view:any) {
+            this.addVisitedView( view)
+            this.addCachedView(view)
+        },
+        delView( view:any) {
+            return new Promise(resolve => {
+               this.delVisitedView(view)
+                this.delCachedView( view)
+                resolve({
+                    visitedViews: [...this.visitedViews],
+                    cachedViews: [...this.cachedViews]
+                })
+            })
+        },
+        delOthersViews( view:any) {
+            return new Promise(resolve => {
+               this.delOthersVisitedViews(view)
+               this.delOthersCachedViews(view)
+                resolve({
+                    visitedViews: [...this.visitedViews],
+                    cachedViews: [...this.cachedViews]
+                })
+            })
+        },
+        delAllViews( view:any) {
+            return new Promise(resolve => {
+                const affixTags = this.visitedViews.filter(tag => tag.meta?.affix)
+                this.visitedViews = affixTags
+                this.cachedViews = []
+                resolve({
+                    visitedViews: [...this.visitedViews],
+                    cachedViews: [...this.cachedViews]
+                })
+            })
+        },
+        delAllVisitedViews() {
+            return new Promise(resolve => {
+                const affixTags = this.visitedViews.filter(tag => tag.meta?.affix)
+                this.visitedViews = affixTags
+                resolve([...this.visitedViews])
+            })
+        },
+        delAllCachedViews() {
+            return new Promise(resolve => {
+                this.cachedViews = []
+                resolve([...this.cachedViews])
+            })
+        },
     }
-    },
-    actions: {
-        addView({ dispatch }, view) {
-            dispatch('addVisitedView', view)
-            dispatch('addCachedView', view)
-        },
-        addVisitedView({ commit }, view) {
-            commit('ADD_VISITED_VIEW', view)
-        },
-        addCachedView({ commit }, view) {
-            commit('ADD_CACHED_VIEW', view)
-        },
-        delView({ dispatch, state }, view) {
-            return new Promise(resolve => {
-                dispatch('delVisitedView', view)
-                dispatch('delCachedView', view)
-                resolve({
-                    visitedViews: [...state.visitedViews],
-                    cachedViews: [...state.cachedViews]
 })
-            })
-        },
-        delVisitedView({ commit, state }, view) {
-            return new Promise(resolve => {
-                commit('DEL_VISITED_VIEW', view)
-                resolve([...state.visitedViews])
-            })
-        },
-        delCachedView({ commit, state }, view) {
-            return new Promise(resolve => {
-                commit('DEL_CACHED_VIEW', view)
-                resolve([...state.cachedViews])
-            })
-        },
-        delOthersViews({ dispatch, state }, view) {
-            return new Promise(resolve => {
-                dispatch('delOthersVisitedViews', view)
-                dispatch('delOthersCachedViews', view)
-                resolve({
-                    visitedViews: [...state.visitedViews],
-                    cachedViews: [...state.cachedViews]
-                })
-            })
-        },
-        delOthersVisitedViews({ commit, state }, view) {
-            return new Promise(resolve => {
-                commit('DEL_OTHERS_VISITED_VIEWS', view)
-                resolve([...state.visitedViews])
-            })
-        },
-        delOthersCachedViews({ commit, state }, view) {
-            return new Promise(resolve => {
-                commit('DEL_OTHERS_CACHED_VIEWS', view)
-                resolve([...state.cachedViews])
-            })
-        },
 
-        delAllViews({ dispatch, state }, view) {
+
-            return new Promise(resolve => {
+export function tagsViewStoreHook() {
-                dispatch('delAllVisitedViews', view)
+    return tagsViewStore(store);
-                dispatch('delAllCachedViews', view)
-                resolve({
-                    visitedViews: [...state.visitedViews],
-                    cachedViews: [...state.cachedViews]
-                })
-            })
-        },
-        delAllVisitedViews({ commit, state }) {
-            return new Promise(resolve => {
-                commit('DEL_ALL_VISITED_VIEWS')
-                resolve([...state.visitedViews])
-            })
-        },
-        delAllCachedViews({ commit, state }) {
-            return new Promise(resolve => {
-                commit('DEL_ALL_CACHED_VIEWS')
-                resolve([...state.cachedViews])
-            })
-        },
-        updateVisitedView({ commit }, view) {
-            commit('UPDATE_VISITED_VIEW', view)
-        }
-    }
 }
 
-export default tagsViewModule;
-

src/store/modules/user.ts

@@ -1,4 +1,5 @@
-import {Module} from "vuex";
+import { defineStore } from "pinia";
+import { store } from "@/store";
 import {UserState, RootStateTypes} from "@store/interface";
 import {Local} from "@utils/storage";
 import {getUserInfo, login, logout} from "@api/login";
@@ -15,36 +16,19 @@ const getDefaultState = () => {
     }
 }
 
-const userModule: Module<UserState, RootStateTypes> = {
+export const useUserStore = defineStore({
-    namespaced: true,
+   id:"youlai-user",
-    state: {
+    state: ():UserState=>({
         token: Local.get('token') || '',
         nickname: '',
         avatar: '',
         roles: [],
         perms: []
-    },
+    }),
-    mutations: {
-        RESET_STATE: (state) => {
-            Object.assign(state, getDefaultState())
-        },
-        SET_TOKEN(state: UserState, token: string) {
-            state.token = token
-        },
-        SET_NICKNAME(state: UserState, nickname: string) {
-            state.nickname = nickname
-        },
-        SET_AVATAR(state: UserState, avatar: string) {
-            state.avatar = avatar
-        },
-        SET_ROLES(state: UserState, roles: string[]) {
-            state.roles = roles
-        },
-        SET_PERMS(state: UserState, perms: string[]) {
-            state.perms = perms
-        }
-    },
     actions: {
+        async RESET_STATE () {
+            this.$reset()
+        },
         /**
          * 用户登录请求
          * @param userInfo 登录用户信息
@@ -53,7 +37,7 @@ const userModule: Module<UserState, RootStateTypes> = {
          *  code: 验证码
          *  uuid: 匹配正确验证码的 key
          */
-        login({commit}, userInfo: { username: string, password: string, code: string, uuid: string }) {
+        login(userInfo: { username: string, password: string, code: string, uuid: string }) {
             const {username, password, code, uuid} = userInfo
             return new Promise((resolve, reject) => {
                 login(
@@ -68,7 +52,7 @@ const userModule: Module<UserState, RootStateTypes> = {
                     const {access_token, token_type} = response.data
                     const accessToken = token_type + " " + access_token
                     Local.set("token", accessToken)
-                    commit('SET_TOKEN', accessToken)
+                    this.token = accessToken
                     resolve(access_token)
                 }).catch(error => {
                     reject(error)
@@ -78,23 +62,21 @@ const userModule: Module<UserState, RootStateTypes> = {
         /**
          *  获取用户信息（昵称、头像、角色集合、权限集合）
          */
-        getUserInfo({commit, state}) {
+        getUserInfo() {
             return new Promise(((resolve, reject) => {
                     getUserInfo().then(response => {
                         const {data} = response
                         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!')
                         }
-                        commit('SET_NICKNAME', nickname)
+                        this.nickname = nickname
-                        commit('SET_AVATAR', avatar)
+                        this.avatar = avatar
-                        commit('SET_ROLES', roles)
+                        this.roles = roles
-                        commit('SET_PERMS', perms)
+                        this.perms = perms
-
                         resolve(data)
                     }).catch(error => {
                         reject(error)
@@ -106,11 +88,11 @@ const userModule: Module<UserState, RootStateTypes> = {
         /**
          *  注销
          */
-        logout({commit, state}) {
+        logout() {
             return new Promise(((resolve, reject) => {
                 logout().then(() => {
                     Local.remove('token')
-                    commit('RESET_STATE')
+                    this.RESET_STATE()
                     resetRouter()
                     resolve(null)
                 }).catch(error => {
@@ -122,15 +104,17 @@ const userModule: Module<UserState, RootStateTypes> = {
         /**
          * 清除 Token
          */
-        resetToken({commit}){
+        resetToken(){
             return new Promise(resolve=>{
                 Local.remove('token')
-                commit('RESET_STATE')
+                this.RESET_STATE()
                 resolve(null)
             })
         }
     }
+})
+
+export function useUserStoreHook() {
+    return useUserStore(store);
 }
 
-export default userModule;
-

src/utils/request.ts

@@ -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

src/views/login/index.vue

@@ -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(() => {