Vuex和Redux的CRUD

React.png Vue.png

  说到这两个东西，分别是vue和react两种框架的状态管理工具，然后巴拉巴拉，算了不说了，百度一大堆专业名词解释，没必要在这里浪费时间解释。o(￣▽￣)d

  其实本篇也不打算用多的吓死人的专业名词去解释这些东西，其核心思想都是换汤不换药的东西，完全基于js的对象属性变化事件来实现的一套前端数据管理的玩意儿，抽掉那些乱七八糟高大上的名词，简单来说这是一种前端数据CRUD思想。

  在用歪门邪道解释这两玩意儿前，先歪门邪道的说说这些年的前端发展历史。

image.png

  大概是15年前左右的时间吧，那个时候还是家庭PC刚刚被普及，网络还没有完全普及的年代，网页基本依靠css和html（那个时候其实我已经开始接触这些前端基础了，只是当时并不知道这是一个以后会发展成职业的技术）有段时间翻硬盘才发现居然有我初中时代写的html代码demo和学习资料，当时的所有资料只有HTML和css2，连HTML5的概念和CSS3的概念都还不存在。

image.png

  然后很多人开始不满足与网站的单一性，浏览器开始更多的支持js实现复杂的页面交互，ajax开始成为数据交互的主流，网页的多样性进入了一个爆发式的阶段，这个时间大概是12，3年前的样子，jquery开始普及流行，其提供了页面节点，也就是DOM的CRUD封装，风靡了许多年。

  最终还是没挺住时代的潮流，当网页内容越来越复杂，单纯的前后分离也没有办法完全控制代码量，简化开发后的维护工作时，AngularJS开始逐渐进入开发人员的技术栈，模块化开发思想将开发过程进一步细化了，基于标签属性的开发模式开始深入人心，前端的开发工作被大幅度简化，但过于简化的开发步骤，反而将一些复杂操作变的不可控，因此之后很快被人放弃，虽然如此，但这个过程并非没有任何作用，DOM节点的CRUD通过框架实现简化的可行性被证明了。

image.png

  然后就是Vue和React的时代了，MVVM的DOM操作思想正式跨入前端开发，不仅仅对功能逻辑进行模块化，甚至将DOM的CRUD变成对象属性的CRUD抽象，也就是MVVM的核心了，于是乎，控制一个页面节点的消失，渲染，展现不需要再通过任何实际的DOM操作，而是通过对象的属性来进行控制，不仅简化了开发步骤，甚至降低了整个前端开发的入门门槛（毫不夸张的说，现在的初级前端能干的活，随便从小学里拉一个10岁左右的小学生都能在1-2个月的培训后胜任）。

  终于，对页面元素的CRUD已经做到了极致，但也诞生了一个新的问题，相对于jquery的时代来说，如果将jquery的DOM操作视为无序的混乱的，那么Vue的CRUD时代就是树结构的有序时代，每一个模块可以被视为一棵独立的树结构顶点，当模块组合后，就是一个完整的对应页面元素的对象树，虽然MVVM思想简化了DOM操作，将DOM的CRUD转换成为了对象树的CRUD，但树结构的问题自然很明显，过度的结构化导致了节点间的数据传输的复杂度被提高了，父子节点间的数据交互复杂了，跨级节点，同级节点的操作复杂度自不必多说，很长一段时间是真的让人愁白了头啊。

  所幸，这个时间并没有持续太久，Vuex和ReactJs对应的Redux出现了，这俩又是个什么玩意呢，简单来说就是，树结构的对象CRUD太麻烦，那我们再抽一层，针对MVVM中M的CRUD再做一层封装，于是，到此为止，终于圆满了，DOM的CRUD交给了树结构对象（Vue或者React构成的虚拟DOM树）而虚拟树的CRUD则交给了Vuex和Redux。

  但真的圆满了么？非也！

  仔细想想Vuex和Redux的核心是什么？自然是节点状态，通过控制节点状态来控制页面对应节点的状态（Vuex和Redux里叫state的东西），但真实的应用过程中，节点内保存的不止有状态啊，还有动态数据，静态数据（固定不变的参数配置等），例如列表数据，页面渲染使用的时候，固然有其每一行的的各自状态（显示，不现实，或者内部部分显示，按钮权限之类的功能，相信很多人也不会陌生），但其数据本身是通过访问后台接口获取，于是乎，数据对象的CRUD很有可能就变成了C、RUD。

  麻烦哩，节点对象有状态，节点对象保管的数据也有状态，头大，于是乎在Vuex和Redux里又细化了一层概念，即区分操作的是不是直接的节点状态（因为例如列表的使用场景，初始时并没有数据，即不存在节点，节点的产生需要先通过数据加载后动态生成才能进一步控制其生成的节点状态，因此初始情况下必然是没有任何东西可以给你操作行内数据的，毕竟你连有没有行可以展示的数据都不知道╮(╯▽╰)╭），也就是Vuex里的mutations、actions以及Redux里action。

  呼，终于完了，舒畅，通过树结构对象数据有序控制DOM节点CRUD，由Vuex和Redux控制树结构对象的C、RUD。

整体总结下来差不多就是这么个玩意儿

  而这当中也带来了一个额外的好处，数据可以被缓存了！Vuex和Redux针对树结构对象的操作时，自然是需要有地方保存数据，还是列表数据的例子，数据通过Vuex和Redux加载并控制生成对应虚拟树节点，自然是先要保存下被加载到的数据，然后才能开始后续的操作，但，没人规定数据保存时间多长啊！合理控制管理加载数据的时机，一个前端数据缓存也就顺便完成了，简直完美。

前端项目基本构造

  当然，以上外门邪道说仅仅是个人观点，不适用于国内任何场景，使用者有被解雇风险，不要问为什么！