vue3 hooks 可以转为 esm 写法？

[chill777]

之前的项目给别人写了，再拿过来的时候发现我的 hooks 被拆掉了。所以这种写法是可以的吗？

对方居然还说感觉这样更合理。。。

[chill777]

@a632079
1. ？一堆 export ，不是 esm 写法？
2. 这里是讨论逻辑复用，不是全局状态管理。

[a632079]

@chill777 #21 1. 我可以 export {} 也可以 module.export = {}。暴露一个 JS 对象出来而已，我觉得直接称呼 ESM 不妥当。
2. 全局状态管理里面没有 dispatch 的概念吗？这是不是一种逻辑复用呢？

3. 是你问的：“所以这种做法是可以的吗？”。我就这句做回答：“是可以的”。所以有什么问题呢？

如果你问是否是合理的话：此模块涉及生命周期的话，抽象成组合式 API 当然是更合适的。其他情况的话，结论就是都可以。看你们团队的喜好。

[leokun]

这两个写法有根本性区别，左侧的每个组件调用都可以获得全新的 chartDataObj ，右侧是所有组件共享一个 chartDataObj 。

左边其实是这样的
https://rollupjs.org/repl/?version=4.9.1&shareable=JTdCJTIyZXhhbXBsZSUyMiUzQW51bGwlMkMlMjJtb2R1bGVzJTIyJTNBJTVCJTdCJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCUyMCU1QyUyMi4lMkZhLmpzJTVDJTIyJTVDbmltcG9ydCUyMCUyMCU1QyUyMi4lMkZiLmpzJTVDJTIyJTVDbiUyMiUyQyUyMmlzRW50cnklMjIlM0F0cnVlJTJDJTIybmFtZSUyMiUzQSUyMm1haW4uanMlMjIlN0QlMkMlN0IlMjJjb2RlJTIyJTNBJTIyZXhwb3J0JTIwY29uc3QlMjB1c2VDaGFydERhdGFPYmolM0QoKSUzRCUzRSU3QiU1Q24lMjAlMjBjb25zdCUyMGNoYXJ0RGF0YU9iaiUzRCU3QiU1Q24lMjAlMjAlMjAlMjBuYW1lJTNBMSU1Q24lMjAlMjAlN0QlNUNuJTIwJTIwcmV0dXJuJTIwY2hhcnREYXRhT2JqJTVDbiU3RCU1Q24lMjIlMkMlMjJpc0VudHJ5JTIyJTNBZmFsc2UlMkMlMjJuYW1lJTIyJTNBJTIyaG9vay5qcyUyMiU3RCUyQyU3QiUyMmNvZGUlMjIlM0ElMjJpbXBvcnQlMjAlN0J1c2VDaGFydERhdGFPYmolN0QlMjBmcm9tJTIwJTVDJTIyLiUyRmhvb2suanMlNUMlMjIlNUNuY29uc29sZS5sb2codXNlQ2hhcnREYXRhT2JqKCkpJTIyJTJDJTIyaXNFbnRyeSUyMiUzQWZhbHNlJTJDJTIybmFtZSUyMiUzQSUyMmEuanMlMjIlN0QlMkMlN0IlMjJjb2RlJTIyJTNBJTIyaW1wb3J0JTIwJTdCdXNlQ2hhcnREYXRhT2JqJTdEJTIwZnJvbSUyMCU1QyUyMi4lMkZob29rLmpzJTVDJTIyJTVDbmNvbnNvbGUubG9nKHVzZUNoYXJ0RGF0YU9iaigpKSUyMiUyQyUyMmlzRW50cnklMjIlM0FmYWxzZSUyQyUyMm5hbWUlMjIlM0ElMjJiLmpzJTIyJTdEJTVEJTJDJTIyb3B0aW9ucyUyMiUzQSU3QiUyMm91dHB1dCUyMiUzQSU3QiUyMmZvcm1hdCUyMiUzQSUyMmlpZmUlMjIlN0QlMkMlMjJ0cmVlc2hha2UlMjIlM0FmYWxzZSU3RCU3RA==

右边其实是这样的：
https://rollupjs.org/repl/?version=4.9.1&shareable=JTdCJTIyZXhhbXBsZSUyMiUzQW51bGwlMkMlMjJtb2R1bGVzJTIyJTNBJTVCJTdCJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCUyMCU1QyUyMi4lMkZhLmpzJTVDJTIyJTVDbmltcG9ydCUyMCUyMCU1QyUyMi4lMkZiLmpzJTVDJTIyJTVDbiUyMiUyQyUyMmlzRW50cnklMjIlM0F0cnVlJTJDJTIybmFtZSUyMiUzQSUyMm1haW4uanMlMjIlN0QlMkMlN0IlMjJjb2RlJTIyJTNBJTIyZXhwb3J0JTIwY29uc3QlMjBjaGFydERhdGFPYmolM0QlN0IlNUNuJTIwJTIwbmFtZSUzQTElNUNuJTdEJTVDbiUyMiUyQyUyMmlzRW50cnklMjIlM0FmYWxzZSUyQyUyMm5hbWUlMjIlM0ElMjJob29rLmpzJTIyJTdEJTJDJTdCJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCU3QmNoYXJ0RGF0YU9iaiU3RCUyMGZyb20lMjAlNUMlMjIuJTJGaG9vay5qcyU1QyUyMiU1Q25jb25zb2xlLmxvZyhjaGFydERhdGFPYmopJTIyJTJDJTIyaXNFbnRyeSUyMiUzQWZhbHNlJTJDJTIybmFtZSUyMiUzQSUyMmEuanMlMjIlN0QlMkMlN0IlMjJjb2RlJTIyJTNBJTIyaW1wb3J0JTIwJTdCY2hhcnREYXRhT2JqJTdEJTIwZnJvbSUyMCU1QyUyMi4lMkZob29rLmpzJTVDJTIyJTVDbmNvbnNvbGUubG9nKGNoYXJ0RGF0YU9iaiklMjIlMkMlMjJpc0VudHJ5JTIyJTNBZmFsc2UlMkMlMjJuYW1lJTIyJTNBJTIyYi5qcyUyMiU3RCU1RCUyQyUyMm9wdGlvbnMlMjIlM0ElN0IlMjJvdXRwdXQlMjIlM0ElN0IlMjJmb3JtYXQlMjIlM0ElMjJpaWZlJTIyJTdEJTJDJTIydHJlZXNoYWtlJTIyJTNBZmFsc2UlN0QlN0Q=

：

[chill777]

@a632079
1. vue3 ？浏览器？有用 cjs 模块的？
2. 不是！ dispatch 每一步得到的值基本都不一样，组件逻辑复用和全局状态管理根本不是一个东西。
3. 什么叫抽象成组合式 API ？

[a632079]

@chill777 #24
1. 我要表达的意思是，这个和你用 ESM ，CJS 无关。他这种用法就相当于声明了个 JS 对象，然后 export 出去，这是很明显的单例用途把。只不过放在了模块上了。
2. 争论点，或者说差异就在是否有必要使用生命周期上。如果单例够用的话，2 能用。如果单例会污染数据的话，那肯定是抽象 hooks ，或者说组合式 API 更合理。这点我的看法是和 #2 一样的。
3. 抽象（解耦）不就是和耦合对立的？一块通用逻辑提取出来，不叫抽象一个组件，一个模块出来吗？

[chill777]

@Yumwey
1. esm 写法。esm 在前面是定语，用来修饰写法的。
2. vue3 是推荐这种写法的<https://cn.vuejs.org/guide/reusability/composables.html#comparisons-with-other-techniques>

[chill777]

@a632079
1. export 出去就是 esm 的写法。hooks 是种写法，拆开各个 export 出去也是写法，我称为 esm 写法没有任何问题。
2. 争这是逻辑复用，每个组件都是独立的，2 不能使用，会相互影响。
3. 组合 api 是 vue3 自己提供的，什么时候轮到你来抽象了。
麻烦把基本概念，逻辑理清在说话。
请勿复言，竖子不足与谋。

[lscho]

自信点。。。右边问题很大

[angrylid]

ESM 写法好像真是你自创的说法。
然后第二种写法在一些情况下确实会有 bug

[iPhone15]

建议用第一种，若要共享数据，可以用下面的工具函数创建一个单例。
https://vueuse.org/shared/createSharedComposable/#createsharedcomposable

它是利用 vue3 提供的 effectScope 能力实现的

[zhhbstudio]

首先，你的代码是我比较常用的写法

回复 #8
"esm：就是改成 import 和 export 写法。"
你的代码最上边不也 import 了最下边不也 export 一个 useHook 出去，你这也是 esm 写法。

回复 #9
我刚好都写过一点，第二种合适的情况是项目大，做成工具函数可多复用吧，比如 emptyData 可以接收一个参数，然后清空，现在代码也是有问题的。

另外：我也赞成 #13 #14 说法
#17 +1

#21
纯粹的逻辑复用（比如上边提到的 emptyData ），我理解应该是抽成工具函数。不然你每次闭包里都有一个新的 emptyData 。但是比如我遇到的情况是手机端和 PC 端复用，那全放 hooks 里我自己觉得挺好。

如果有错误的地方还请各位大佬不吝赐教~

[mxT52CRuqR6o5]

https://cn.vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api
官方文档哦

[Yumwey]

@chill777 我也喜欢 hooks 写法的... 推荐是一回事，没咋写过 react 的 vue 前端是大概率不习惯 hooks 写法的😂vue 我记得也有个 hooks 库来着，一时间忘了

[jerrry]

吐嘈一下你们的命名，又是 data 、又是 obj 的

[chill777]

@jerrry #34
组内命名规范：reactive 变量后缀统一 Obj 。函数命名需要注意可读性。
有什么问题吗？