.

src/store/index.ts

@@ -1,24 +1,25 @@
 import {InjectionKey} from 'vue'
 import {createStore,useStore as baseUseStore ,Store} from 'vuex'
+import {RootStateTypes} from "@store/interface";
 
-export interface State {
-    count: number
+// 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)
 }
 
-export const key: InjectionKey<Store<State>> = Symbol()
+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 store = createStore<State>({
-    state() {
-        return {
-            count: 0
-        }
-    },
-    mutations: {
-        increment(state: { count: number }) {
-            state.count++
-        }
-    }
-})
+export const key: InjectionKey<Store<RootStateTypes>> = Symbol()
+
+export const store = createStore<RootStateTypes>({modules})
 
 export function userStore(){
     return baseUseStore(key)

src/store/interface.ts

@@ -8,7 +8,16 @@ export interface UserState {
 }
 
 
+export interface AppState {
+    device: string,
+    sidebar: {
+        opened: boolean,
+        withoutAnimation: boolean
+    }
+}
+
 // 顶级类型声明
 export interface RootStateTypes {
-    user: UserState
+    user: UserState,
+    app:AppState
 }

src/store/modules/app.ts

@@ -0,0 +1,47 @@
+import {Module} from "vuex";
+import {RootStateTypes, AppState} from "@store/interface";
+import {Local} from "@utils/storage";
+
+const appModule: Module<AppState, RootStateTypes> = {
+    namespaced: true,
+    state: {
+        device: 'desktop',
+        sidebar: {
+            opened: Local.get('sidebarStatus') ? !!+Local.get('sidebarStatus') : true,
+            withoutAnimation: false
+        }
+    },
+    mutations: {
+        TOGGLE_SIDEBAR: state => {
+            state.sidebar.opened = !state.sidebar.opened
+            state.sidebar.withoutAnimation = false
+            if (state.sidebar.opened) {
+                Local.set('sidebarStatus', 1)
+            } else {
+                Local.set('sidebarStatus', 0)
+            }
+        },
+        CLOSE_SIDEBAR: (state, withoutAnimation) => {
+            Local.set('sidebarStatus', 0)
+            state.sidebar.opened = false
+            state.sidebar.withoutAnimation = withoutAnimation
+        },
+        TOGGLE_DEVICE: (state, device) => {
+            state.device = device
+        }
+    },
+    actions: {
+        toggleSideBar({commit}) {
+            commit('TOGGLE_SIDEBAR')
+        },
+        closeSideBar({commit}, {withoutAnimation}) {
+            commit('CLOSE_SIDEBAR', withoutAnimation)
+        },
+        toggleDevice({commit}, device) {
+            commit('TOGGLE_DEVICE', device)
+        }
+    }
+}
+
+export default appModule;
+

src/store/modules/user.ts

@@ -1,8 +1,7 @@
 import {Module} from "vuex";
 import {UserState, RootStateTypes} from "@store/interface";
 import {Local} from "@utils/storage";
-import {getUserInfo, login,logout} from "@api/login"
-
+import {getUserInfo, login, logout} from "@api/login"
 
 const getDefaultState = () => {
     return {
@@ -14,7 +13,6 @@ const getDefaultState = () => {
     }
 }
 
-
 const userModule: Module<UserState, RootStateTypes> = {
     namespaced: true,
     state: {
@@ -104,12 +102,12 @@ const userModule: Module<UserState, RootStateTypes> = {
         /**
          *  注销
          */
-        logout({commit,state}){
+        logout({commit, state}) {
             return new Promise(((resolve, reject) => {
-                logout().then(()=>{
+                logout().then(() => {
                     Local.remove('token')
                     commit('RESET_STATE')
-                }).catch(error=>{
+                }).catch(error => {
                     reject(error)
                 })
             }))