Skip to content

Commit 743acd1

Browse files
author
白唯
committed
refactor(vuex type): 完善setStoreState方法,以及增加了 dispatch 以及 getters 的类型以及相关的工具函数
setStoreState 第二个参数只能是所传参数的 key 值,新增了dispatch 以及 getters的封装方法
1 parent 3f97086 commit 743acd1

File tree

9 files changed

+101
-69
lines changed

9 files changed

+101
-69
lines changed

‎src/@types/index.ts

-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
import { AppStateType } from '@/store/modules/app/state'
22
import { ConsoleStateType } from '@/store/modules/console/state'
33
import { UserStateType } from '@/store/modules/user/state'
4-
import { ConsoleGetterType } from '../store/modules/console/getters'
5-
6-
// vuex getters 模块的类型
7-
type GetterType = {
8-
console: ConsoleGetterType
9-
}
104

115
// vuex state 的模块的类型
126
type ModuleType = {

‎src/store/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import createPersistedState from 'vuex-persistedstate'
33
import mutations from './mutations'
44
import modules from './modules'
55
import { StateType } from '@/@types'
6+
import { InjectionKey } from 'vue'
7+
8+
export const key: InjectionKey<Store<StateType>> = Symbol()
69

710
const store: Store<StateType> = createStore({
811
strict: true,

‎src/store/modules/app/state.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ const state = {
66
theme: 'light',
77
version: '0.0.1',
88
fullLoading: false,
9-
loadingText: 'Loading...'
9+
loadingText: 'Loading...',
10+
currentActiveNav: '解决方案'
1011
}
1112
type AppStateType = typeof state
1213

‎src/store/modules/console/actions.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { CloudRoleService } from '../../../api/cloudrole'
1313
* @return status 返回状态 err_code：1，逻辑正确，err_code：0，发生错误。
1414
*/
1515

16-
export default {
16+
const consoleActions = {
1717
// 获取用户角色列表
1818
async getRoleList(): Promise<HttpResponse | number> {
1919
const res = await CommonService.getRoleInfoList()
@@ -104,3 +104,8 @@ export default {
104104
return 0
105105
}
106106
}
107+
108+
type ConsoleActionsType = keyof typeof consoleActions
109+
110+
export { ConsoleActionsType }
111+
export default consoleActions

‎src/store/modules/console/getters.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,6 @@ const consoleGetter = {
3232
}
3333
}
3434

35-
type ConsoleGetterType = typeof consoleGetter
36-
export { ConsoleGetterType }
35+
type ConsoleGettersType = typeof consoleGetter
36+
export { ConsoleGettersType }
3737
export default consoleGetter

‎src/store/modules/user/actions.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Store from '@/store'
66
* @return status 返回状态 err_code：1，逻辑正确，err_code：0，发生错误。
77
*/
88

9-
export default {
9+
const userActions = {
1010
// 刷新令牌
1111
refreshToken() {
1212
return UserService.refreshToken({
@@ -25,3 +25,8 @@ export default {
2525
})
2626
}
2727
}
28+
29+
type UserActionsType = typeof userActions
30+
31+
export { UserActionsType }
32+
export default userActions

‎src/store/utils.ts

+27-4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ type CommitNameType = AppStateType & ConsoleStateType & UserStateType
1111

1212
/**
1313
* @description setStoreState -方法是一个 mutaitions 的操作
14+
* @type {T} T - 你要更改的模块的类型
1415
* @param {string} module - 要操作的state 的 module 名
1516
* @param {string} key - 要操作的state 的 module 下的 key 值
1617
* @param {any} value - 当有 msg 参数时,视为赋值操作,触发 mutation,msg 则为要复制的数据.
@@ -24,17 +25,39 @@ type CommitNameType = AppStateType & ConsoleStateType & UserStateType
2425
* }
2526
* }
2627
* ```
27-
* 想要单独修改 firstName,直接使用 setStoreState('app','name',{firstName:'modifiedName',lastName:'Ma'})
28+
* 想要单独修改 firstName,直接使用 setStoreState<AppStateType>('app','name',{firstName:'modifiedName',lastName:'Ma'})
2829
*/
2930

30-
export const setStoreState = (
31+
export function setStoreState<T>(
3132
module: ModuleNameType,
32-
key: keyof CommitNameType,
33+
key: keyof T,
3334
value: any
34-
) => {
35+
) {
3536
store.commit({
3637
type: module + '/__set',
3738
key: key,
3839
val: value
3940
})
4041
}
42+
43+
/**
44+
* @description 封装 dispatch 方法
45+
* @type {T} T 你要派发actions的模块的类型
46+
* @example 使用方法如下 const result = await dispatchActions<UserActionsType>('console','refreshToken',1)
47+
*/
48+
export function dispatchAction<T>(
49+
module: ModuleNameType,
50+
key: keyof T,
51+
value?: any
52+
) {
53+
store.dispatch(`${module}/${key}`, value)
54+
}
55+
56+
/**
57+
* @description 封装 dispatch 方法
58+
* @type {T} T 你要获取 getters的模块的类型
59+
* @example 使用方法如下 const result = getStoreGetter<ConsoleGetterType>('console','list')
60+
*/
61+
export function getStoreGetter<T>(module: ModuleNameType, key: keyof T) {
62+
store.getters[`${module}/${key}`]
63+
}

‎src/views/test/Test.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ import { useStore } from 'vuex'
9191
import { setStoreState } from '@/store/utils'
9292
import { i18nInstance } from '@/i18n'
9393
import ChangeLanguage from '@/components/ChangeLanguage.vue'
94+
import { AppStateType } from '@/store/modules/app/state'
9495
9596
export default defineComponent({
9697
components: {
@@ -120,7 +121,7 @@ export default defineComponent({
120121
}
121122
122123
const changeText = () => {
123-
setStoreState('app', 'loadingText', state.globalLoadingText)
124+
setStoreState<AppStateType>('app', 'loadingText', state.globalLoadingText)
124125
setStoreState('app', 'fullLoading', true)
125126
setTimeout(() => {
126127
setStoreState('app', 'fullLoading', false)

‎tsconfig.json

+53-53
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,53 @@
1-
{
2-
"compilerOptions": {
3-
"target": "esnext",
4-
"module": "esnext",
5-
"strict": true,
6-
"declaration": true,
7-
"jsx": "preserve",
8-
"importHelpers": true,
9-
"moduleResolution": "node",
10-
"experimentalDecorators": true,
11-
"skipLibCheck": false,
12-
"esModuleInterop": true,
13-
"allowSyntheticDefaultImports": true,
14-
"sourceMap": false,
15-
"baseUrl": ".",
16-
"rootDir": ".",
17-
"types": [
18-
"webpack-env",
19-
"chai",
20-
"mocha"
21-
],
22-
"paths": {
23-
"@/*": [
24-
"src/*"
25-
],
26-
"@/views/*": [
27-
"src/views/*"
28-
],
29-
"@/components/*": [
30-
"src/components/*"
31-
],
32-
"@/assets/*": [
33-
"src/assets/*"
34-
],
35-
"@/utils/*": [
36-
"src/utils/*"
37-
],
38-
"@/api/*": [
39-
"src/api/*"
40-
]
41-
},
42-
"lib": [
43-
"esnext",
44-
"dom",
45-
"dom.iterable",
46-
"scripthost"
47-
]
48-
},
49-
"exclude": [
50-
"node_modules",
51-
"dist"
52-
]
53-
}
1+
{
2+
"compilerOptions": {
3+
"target": "esnext",
4+
"module": "esnext",
5+
"strict": true,
6+
"declaration": true,
7+
"jsx": "preserve",
8+
"importHelpers": true,
9+
"moduleResolution": "node",
10+
"experimentalDecorators": true,
11+
"skipLibCheck": false,
12+
"esModuleInterop": true,
13+
"allowSyntheticDefaultImports": true,
14+
"sourceMap": false,
15+
"baseUrl": ".",
16+
"rootDir": ".",
17+
"types": [
18+
"webpack-env",
19+
"chai",
20+
"mocha"
21+
],
22+
"paths": {
23+
"@/*": [
24+
"src/*"
25+
],
26+
"@/views/*": [
27+
"src/views/*"
28+
],
29+
"@/components/*": [
30+
"src/components/*"
31+
],
32+
"@/assets/*": [
33+
"src/assets/*"
34+
],
35+
"@/utils/*": [
36+
"src/utils/*"
37+
],
38+
"@/api/*": [
39+
"src/api/*"
40+
]
41+
},
42+
"lib": [
43+
"esnext",
44+
"dom",
45+
"dom.iterable",
46+
"scripthost"
47+
]
48+
},
49+
"exclude": [
50+
"node_modules",
51+
"dist"
52+
]
53+
}

0 commit comments

Comments
 (0)