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

資深大佬 : daguaochengtang 5

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

然后我看了下网上不不使用装饰器的写法，当用到 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 就必须写这样又臭又长的类型声明吗？还是说有其它优雅使用方式，但是我不知道？欢迎拍砖

大佬有話說 (11)

資深大佬 : 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 了