Vuex真的不适合Vue3了吗?

作者: 自然框架 | 来源:发表于2021-02-22 15:52 被阅读0次

Vuex是针对Vue设计的一套状态管理模式,现在已经发展到了第四个版本。一开始很是向往,感觉都第四版了,应该更完善才对。

然后去官网学习,Vuex3有中文版,那就先看这个,然后又对照看Vuex4,虽然4没有中文版,但是代码咱认得对吧。对比一看代码几乎是一样的,除了最后有一段“Composition API”的介绍,但是内容也非常少。

那么也许是代码很完善了,没啥可以优化改进了吧,但是。。。

准确的说Vuex是针对Vue2.x设计的,弥补了Vue2的很多不足。
但是现在 Vue3 也弥补了 Vue2.x 的很多不足,所以现在 vuex 还适合了吗?

Vuex的很多设计都是为了补充Vue2的短板而设计的,比如map系列,这个是因为没有composition API导致的,现在有了,map系列就有点冗余设计的味道了。

而我是想做一套前端的“数据管理模式”,包括大号data、组件之间共享数据、还有和后端API交互信息,当然响应性也是自带的,reactive本身就支持嘛。

总体结构是这样的:


数据管理 模式.png

数据从后端获取,可以先存入indexedDB,当然也可以不存。
然后看是否共享数据,不是的话交给组件的data;是的话放入state。

state可以通过 Provide / Inject 注入到根目录。

然后“页面”获取到数据,交给组件(控件)做处理。

为啥要用indexedDB?

因为可以做数据缓存。
像字典数据、城市区县数据、组织架构、常用的员工信息等数据。
这些数据变化不频繁、数据量也不是太大,但是使用率却很高,
那么如果可以在前端做缓存,这样就可以减少前后端的数据沟通次数。

而且也可以在一定程度上避免后端关系型数据库的多表关联的情况,因为表连多了,访问量巨大的时候容易造成死锁。

state 的构成

可以只使用 Vuex 的 state 部分,也可以干脆自己写一个state,通过 Provide / Inject 注入到根组件,或者某一级的父组件。

state 肯定使用 reactive 了,自带响应性,为啥不用呢?

关于处理函数的存放方式的讨论

我的想法是,把 state 和函数分离开,这样可以更灵活。
另一种想法是,做成充血实体类,也就是把 state 和处理函数放在一起,封装成一个完整的类。当然 state 还是可以注入到根组件的。

具体实现还没有做,刚刚弄明白了一点 Vuex,先使用 Vuex 实现一些功能,然后在过渡到我的这个想法上面来。

目前的想法还比较简陋,以后慢慢完善。

相关文章

  • Vuex真的不适合Vue3了吗?

    Vuex是针对Vue设计的一套状态管理模式,现在已经发展到了第四个版本。一开始很是向往,感觉都第四版了,应该更完善...

  • Vuex4.0(八)在Vue3环境下如何优雅的管理状态?

    基于Vue2.x风格的Vuex的使用方式不适合Vue3了 我们都知道Vuex是专门为Vue开发的一套状态管理方式,...

  • vue安装veux

    现在使用npm i 会默认安装vuex4,vuex4只适用于vue3,如果使用的vue环境是vue3,安装vuex...

  • VUE3安装教程

    目标:Vue3 + Ant Design + TypeScript + Router + Vuex 安装环境 1、...

  • pinia与vuex对比

    Vue3 中使用 Vuex的话需要使用Vuex4,并且存在很大缺陷,所以在 Componsition API诞生之...

  • Vuex最详细教学

    一、Vuex单界面到多界面状态管理切换: 1.安装配置vuex,版本依赖 vue2的项目使用vuex3,vue3的...

  • 【VUE3】vue3.0项目配置

    vue3 + vite + TS + vue-router + vuex + less + 组合式API + 多语...

  • vue2 vuex的使用

    vuex在vue2中的使用与在vue3中不同,首先,需要安装vuex3而不是vuex4,然后,需要在全局中进行定义...

  • Vue3中使用Pinia

    Vue2 中使用Vuex进行状态管理,在Vue3中,引入了Pinia,如果使用Vue3的脚手架搭建项目,其中包含了...

  • 9、Vue3 crud案例

    基于vue3、vuex、vue-router、ts 案例 效果 案例 App.vue main.ts src/ro...

网友评论

    本文标题:Vuex真的不适合Vue3了吗?

    本文链接:https://www.haomeiwen.com/subject/qtfhfltx.html