这是一个创建于 1364 天前的主题，其中的信息可能已经有所发展或是发生改变。
首先排除装饰器写法，个人偏见，实在不喜欢
然后我看了下网上不不使用装饰器的写法，当用到 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 就必须写这样又臭又长的类型声明吗？还是说有其它优雅使用方式，但是我不知道？欢迎拍砖
然后我看了下网上不不使用装饰器的写法，当用到 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 就必须写这样又臭又长的类型声明吗？还是说有其它优雅使用方式，但是我不知道？欢迎拍砖
 |
1
iikebug 2021-03-01 16:32:27 +08:00
可以考虑自己实现个轻量级的状态管理工具
|
 |
2
murmur 2021-03-01 16:42:55 +08:00
我记得 vuex 非常简单啊，一个文件就可以搞定状态管理，比 redux 简单多了，为啥这么复杂
|
 |
3
wunonglin 2021-03-01 16:44:44 +08:00
最近也是在看 vue3 的 ts 源码，，，类型定义真的乱。。。和 ng 不是一个级别的
|
 |
4
daguaochengtang OP @murmur typescript 的类型声明啊
|
|
5
murmur 2021-03-01 17:04:44 +08:00
@daguaochengtang vuex 最简单的时候只需要一个文件，里面写 state 和 mutation，其余的都不需要，也不要求不可变对象，为什么会有这么复杂的表述
描述复杂不代表要写起来复杂啊 |
|
6
daguaochengtang OP @murmur 应该是为了 ts 的类型提示
|
 |
7
ruoxie 2021-03-01 17:30:00 +08:00
为什么还要用 vuex，直接 hooks
|
|
8
daguaochengtang OP @ruoxie 看过说 vue3 不需要 vuex 直接用 hooks 的，但是 hooks 貌似只能用在 setup 里吧，我如果想在其它地方用呢？比如 vuex 我可以在 axios 的 request 拦截器里引入 store,使用 store.user.state.token，你用 hooks 怎么实现呢？
|
|
9
ruoxie 2021-03-01 19:07:38 +08:00
@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 出去 |
 |
10
varzy 2021-03-02 08:56:46 +08:00 via iPhone
同意。vue 全家桶用了三年，结果前段时间想用 vue3 + ts 这套东西写个 demo 练手，愣是在 vuex4 +ts 这卡的无从下手。。。
|
|
11
daguaochengtang OP @varzy 真是恶心，究其原因还是 vuex 在设计阶段就没考虑到 ts 支持，vuex4 也只是在原来的源码基础上向外暴露了一些 type，源码依然是 js 写的，想愉快的用 ts 写 vuex 估计要等 vuex5 了
|
Select Language