vuex4 到底怎么优雅的与 typescript 结合使用?

[daguaochengtang]

首先排除装饰器写法，个人偏见，实在不喜欢

然后我看了下网上不不使用装饰器的写法，当用到 modules 的时候，那个类型定义，真实恶心到我了。贴个代码片段吧，比如我有一个 app module，这个模块 Store 的类型定义大致长下面这样，这玩意真是给碳基生物用的吗？能看懂，但是代码真实又臭又长。

```
export type AppStore<S = AppState> = Omit<VuexStore<S>, 'getters' | 'commit' | 'dispatch'>
& {
commit<K extends keyof Mutations, P extends Parameters<Mutations[K]>[1]>(
key: K,
payload: P,
options?: CommitOptions
): ReturnType<Mutations[K]>
} & {
dispatch<K extends keyof Actions>(
key: K,
payload: Parameters<Actions[K]>[1],
options?: DispatchOptions
): ReturnType<Actions[K]>
};
```

所以，现在 vuex4 的现状就是不用装饰器写 ts 就必须写这样又臭又长的类型声明吗？还是说有其它优雅使用方式，但是我不知道？欢迎拍砖

[iikebug]

可以考虑自己实现个轻量级的状态管理工具

[murmur]

我记得 vuex 非常简单啊，一个文件就可以搞定状态管理，比 redux 简单多了，为啥这么复杂

[wunonglin]

最近也是在看 vue3 的 ts 源码，，，类型定义真的乱。。。和 ng 不是一个级别的

[daguaochengtang]

@murmur typescript 的类型声明啊

[murmur]

@daguaochengtang vuex 最简单的时候只需要一个文件，里面写 state 和 mutation，其余的都不需要，也不要求不可变对象，为什么会有这么复杂的表述

描述复杂不代表要写起来复杂啊

[daguaochengtang]

@murmur 应该是为了 ts 的类型提示

[ruoxie]

为什么还要用 vuex，直接 hooks

[daguaochengtang]

@ruoxie 看过说 vue3 不需要 vuex 直接用 hooks 的，但是 hooks 貌似只能用在 setup 里吧，我如果想在其它地方用呢？比如 vuex 我可以在 axios 的 request 拦截器里引入 store,使用 store.user.state.token，你用 hooks 怎么实现呢？

[ruoxie]

@daguaochengtang

import { reactive } from 'vue';

const user = reactive<{ name: boolean,token:string, }>({
name: false,
token:''
});

export function getToken(){
return user.token
}

export default function useUserInfo() {
...
return {
user
};
}

当然你可以粗暴一点，直接把 user export 出去

[varzy]

同意。vue 全家桶用了三年，结果前段时间想用 vue3 + ts 这套东西写个 demo 练手，愣是在 vuex4 +ts 这卡的无从下手。。。

[daguaochengtang]

@varzy 真是恶心，究其原因还是 vuex 在设计阶段就没考虑到 ts 支持，vuex4 也只是在原来的源码基础上向外暴露了一些 type，源码依然是 js 写的，想愉快的用 ts 写 vuex 估计要等 vuex5 了