perf(vuex): 增加 vuex 的模块示例

@types/index.d.ts

@@ -1,14 +1,37 @@
-import { AppStateType } from '@/store/modules/app/state'
-
-// vuex模块的类型
-type ModuleType = { app: AppStateType }
-
-// 所有的StateType
-export type StateType = ModuleType
-
-/** http请求响应格式  */
-export declare interface ApiResponse {
-  errCode: number
-  errMsg?: string
-  data?: any
-}
+import { AppStateType } from '@/store/modules/app/state'
+import { ConsoleStateType } from '@/store/modules/console/state'
+
+// vuex模块的类型
+type ModuleType = { app: AppStateType; console: ConsoleStateType }
+
+// 所有的StateType
+export type StateType = ModuleType
+
+/** http请求响应格式  */
+export declare interface ApiResponse {
+  errCode: number
+  errMsg?: string
+  data?: any
+}
+
+// ant-design-button 颜色
+export type ButtonColorType =
+  | 'primary'
+  | 'danger'
+  | 'dashed'
+  | 'ghost'
+  | 'default'
+  | 'link'
+
+// icon的类型
+export type IconType = 'icon' | 'iconfont'
+
+// 对话框打开类型
+export type ModalOpenMode = 'edit' | 'add' | 'other'
+
+export interface BasicUserType {
+  name: string
+  avatar: unknown
+  role: string
+  department: string
+}

src/store/index.ts

@@ -14,12 +14,23 @@ const store: Store<StateType> = createStore({
       ? [
           createLogger(),
           createPersistedState({
-            paths: ['app']
+            paths: [
+              'app',
+              'console.sidebarFold',
+              'console.thirdPanelFold',
+              'console.teamGroupType',
+              'console.teamDetaiPanel'
+            ] // 部分数据只为方便调试,不应在线上环境持久化
           })
         ]
       : [
           createPersistedState({
-            paths: ['app']
+            paths: [
+              'app',
+              'console.sidebarFold',
+              'console.teamGroupType',
+              'console.teamDetaiPanel'
+            ]
           })
         ]
 })

src/store/modules/console/actions.ts

@@ -0,0 +1,3 @@
+export default {
+  //
+}

src/store/modules/console/getters.ts

@@ -0,0 +1,3 @@
+export default {
+  //
+}

src/store/modules/console/mutations.ts

@@ -0,0 +1,5 @@
+export default {
+  __set(state: any, msg: { key: string; val: any }) {
+    state[msg.key] = msg.val
+  }
+}

src/store/modules/console/state.ts

@@ -0,0 +1,20 @@
+import { StateType } from '@types'
+import { Module } from 'vuex'
+
+// 均放置跟控制台 UI 状态相关内容
+
+const state = {
+  sidebarFold: false, // 侧边栏菜单是否折叠
+  thirdPanelFold: true, // 第三级版面是否折叠
+  teamDetaiPanel: '0', // 团队详情里 tabbar 当前活跃的 key
+  teamGroupType: 'all' // 成员分组当前选择
+}
+type ConsoleStateType = typeof state
+
+const console: Module<ConsoleStateType, StateType> = {
+  namespaced: true,
+  ...state
+}
+
+export { ConsoleStateType, state }
+export default console

src/store/utils.ts

@@ -1,11 +1,12 @@
 import store from '@/store'
 import { AppStateType } from './modules/app/state'
+import { ConsoleStateType } from './modules/console/state'
 
 // 定义 state 下的 module 值
-type ModuleNameType = 'app' | 'others'
+type ModuleNameType = 'app' | 'console'
 
 // 定义 module 下的 key 值
-type CommitNameType = AppStateType
+type CommitNameType = AppStateType & ConsoleStateType
 
 /**
  * @description setStoreState -方法是一个 mutaitions 的操作