Vuex是针对Vue设计的一套状态管理模式,现在已经发展到了第四个版本。一开始很是向往,感觉都第四版了,应该更完善才对。
然后去官网学习,Vuex3有中文版,那就先看这个,然后又对照看Vuex4,虽然4没有中文版,但是代码咱认得对吧。对比一看代码几乎是一样的,除了最后有一段“Composition API”的介绍,但是内容也非常少。
那么也许是代码很完善了,没啥可以优化改进了吧,但是。。。
准确的说Vuex是针对Vue2.x设计的,弥补了Vue2的很多不足。
但是现在 Vue3 也弥补了 Vue2.x 的很多不足,所以现在 vuex 还适合了吗?
Vuex的很多设计都是为了补充Vue2的短板而设计的,比如map系列,这个是因为没有composition API导致的,现在有了,map系列就有点冗余设计的味道了。
而我是想做一套前端的“数据管理模式”,包括大号data、组件之间共享数据、还有和后端API交互信息,当然响应性也是自带的,reactive本身就支持嘛。
总体结构是这样的:
数据从后端获取,可以先存入indexedDB,当然也可以不存。
然后看是否共享数据,不是的话交给组件的data;是的话放入state。
state可以通过 Provide / Inject 注入到根目录。
然后“页面”获取到数据,交给组件(控件)做处理。
为啥要用indexedDB?
因为可以做数据缓存。
像字典数据、城市区县数据、组织架构、常用的员工信息等数据。
这些数据变化不频繁、数据量也不是太大,但是使用率却很高,
那么如果可以在前端做缓存,这样就可以减少前后端的数据沟通次数。
而且也可以在一定程度上避免后端关系型数据库的多表关联的情况,因为表连多了,访问量巨大的时候容易造成死锁。
state 的构成
可以只使用 Vuex 的 state 部分,也可以干脆自己写一个state,通过 Provide / Inject 注入到根组件,或者某一级的父组件。
state 肯定使用 reactive 了,自带响应性,为啥不用呢?
关于处理函数的存放方式的讨论
我的想法是,把 state 和函数分离开,这样可以更灵活。
另一种想法是,做成充血实体类,也就是把 state 和处理函数放在一起,封装成一个完整的类。当然 state 还是可以注入到根组件的。
具体实现还没有做,刚刚弄明白了一点 Vuex,先使用 Vuex 实现一些功能,然后在过渡到我的这个想法上面来。
目前的想法还比较简陋,以后慢慢完善。