在知乎上看到一个问题,问“vue3下vuex是不是就没意义了”,便随手回答了一下,调侃自己对vuex本身的设计就表示不认同,主要的理由是vue本身支持直接修改属性完成响应式,而vuex却要学redux那一套定义mutation、action之类的,过于复杂,真正简单的方法,应该像vue本身一样,直接修改属性。于是写下了自己的想法:
const store = new Store({ a: 1 }) app.use(store)
然后在组件里面修改:
this.$state.a = 2
这样看上去多舒服,思路上和vue一致,定义全局状态时,也不需要复杂的mutation, action,只需要一个对象。这才是最符合直觉的vuex使用方式吧。
简单写完上面的想法之后,我就没管了,没想到过了两天,这问答下面都积累了50条评论,点赞也蹭蹭蹭的在增加,感觉要火呀
但是,当我看完这些评论之后,却高兴不起来,因为在这么纯粹的想法面前,各种抖机灵的评论都出来了。其中一个重要的讨论点在于,基于dispatch('SOME_NAME'的方式有利于调试,找到状态被修改的位置。我对这种辩解嗤之以鼻,大部分人根本没搞懂redux里面dispatch的设计思想,就在这里各种吹捧,他们无非把dispatch当一个带字符串标记的update看,而人家真正的设计是send(message)的理念,躺在两条河里还说洗的一个澡,我也是有点服。
不就是想追踪状态被修改的位置吗?我想,既然都已经提出来了,不妨实现吧,毕竟我造轮功力还是挺强的。简单翻阅了vue的文档,花了2个多小时,写了一个stupid-vue库。
https://github.com/tangshuang/stupid-vuex
使用方式如下:
不得不说,vue3的api设计比vue2合理了非常多,在vue2时代,我做相关工具的时候,非常吃力,但是到了vue3,所有api都是顶级暴露的,想要什么能力都可以组装出来,很厉害。
一通操作下来,这个包就这样发布了。
等一下,状态修改追踪呢?我利用了Error的特性,抓取它的stack,直接可以得到状态修改时,是由哪一行代码造成的。
看上图,通过点击浏览器里面的调试代码,就可以直接定位到源码的位置,这比所谓vue devtool给的一大串跳来跳去,只能看数据流,最后你还是不知道具体哪个位置带来的变化来的更直接吧。
多好。
故事就结束了
....并没有。“你这不符合单向数据流的理念”,WTF??在vue里面你跟我讲单向数据流的理念,入魔了吧。
我大部分时间都是用react来写项目,没曾想vue发展这么快,vue3真的很好用,唯一的不足在于它强依赖构建工具,如果能做到vue2一样直接浏览器引一个库,在运行时编译,那就很方便了。不过随着前端发展,这种依赖工具的框架慢慢成主流,也是正常的。
网络上会喷的人很多,但是,看一个人行不行还是要看他的行动力,只会喷不会造,这种人不必理会,提升自己的内功才是王道。
确实直接new一个Vue拿来用其实就挺好