V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
daguaochengtang
V2EX  ›  问与答

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

  •  
  •   daguaochengtang · 2021-03-01 15:52:37 +08:00 · 1731 次点击
    这是一个创建于 1124 天前的主题,其中的信息可能已经有所发展或是发生改变。
    首先排除装饰器写法,个人偏见,实在不喜欢

    然后我看了下网上不不使用装饰器的写法,当用到 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 条回复    2021-03-02 13:18:06 +08:00
    iikebug
        1
    iikebug  
       2021-03-01 16:32:27 +08:00
    可以考虑自己实现个轻量级的状态管理工具
    murmur
        2
    murmur  
       2021-03-01 16:42:55 +08:00
    我记得 vuex 非常简单啊,一个文件就可以搞定状态管理,比 redux 简单多了,为啥这么复杂
    wunonglin
        3
    wunonglin  
       2021-03-01 16:44:44 +08:00
    最近也是在看 vue3 的 ts 源码,,,类型定义真的乱。。。和 ng 不是一个级别的
    daguaochengtang
        4
    daguaochengtang  
    OP
       2021-03-01 17:02:47 +08:00
    @murmur typescript 的类型声明啊
    murmur
        5
    murmur  
       2021-03-01 17:04:44 +08:00
    @daguaochengtang vuex 最简单的时候只需要一个文件,里面写 state 和 mutation,其余的都不需要,也不要求不可变对象,为什么会有这么复杂的表述

    描述复杂不代表要写起来复杂啊
    daguaochengtang
        6
    daguaochengtang  
    OP
       2021-03-01 17:09:57 +08:00
    @murmur 应该是为了 ts 的类型提示
    ruoxie
        7
    ruoxie  
       2021-03-01 17:30:00 +08:00
    为什么还要用 vuex,直接 hooks
    daguaochengtang
        8
    daguaochengtang  
    OP
       2021-03-01 17:49:21 +08:00
    @ruoxie 看过说 vue3 不需要 vuex 直接用 hooks 的,但是 hooks 貌似只能用在 setup 里吧,我如果想在其它地方用呢?比如 vuex 我可以在 axios 的 request 拦截器里引入 store,使用 store.user.state.token,你用 hooks 怎么实现呢?
    ruoxie
        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 出去
    varzy
        10
    varzy  
       2021-03-02 08:56:46 +08:00 via iPhone
    同意。vue 全家桶用了三年,结果前段时间想用 vue3 + ts 这套东西写个 demo 练手,愣是在 vuex4 +ts 这卡的无从下手。。。
    daguaochengtang
        11
    daguaochengtang  
    OP
       2021-03-02 13:18:06 +08:00
    @varzy 真是恶心,究其原因还是 vuex 在设计阶段就没考虑到 ts 支持,vuex4 也只是在原来的源码基础上向外暴露了一些 type,源码依然是 js 写的,想愉快的用 ts 写 vuex 估计要等 vuex5 了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2689 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 15:12 · PVG 23:12 · LAX 08:12 · JFK 11:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.