dev-zuo 技术日常
Github

传数据全局变量就可以了,为什么需要状态管理

这篇文章发布于 2019/11/14,归类于
标签:
vuex使用场景vue相对全局变量有什么优势为什么需要使用Vuex状态管理全局对象也可以管理状态,为什么需要vuex

在vue开发中,我之前很少使用状态管理vuex,总觉得没有太大的实际用途。后面项目实践后,才能真正体会状态管理的强大。为什么需要状态管理,这个需要在开发实践中慢慢体会。

开发过程中遇到的相关真实场景

全局变量较多场景

场景A:在19年11月份左右我当时负责为一个jsp项目做一些更新,在维护别人写的代码时,发现之前的人虽然把select等组件封装为了一个个固定的对象。但不同的模块js里,相互引用,你会发现各种莫名其妙的全局变量,不知道是哪里注入的(由于只要主页面引入了两个js文件,这两个js的变量是互通的)。

比如有两个组件:组件A对象为objA,组件B对象为objB,我在组件C里想获取组件A、B的结果,我需要调用objA或objB的全局变量。你可以想象当表单字段很多时,你要通过访问很多个对象的变量才行

虽然他们都是全局变量,但是太零散了,如果我们建立一个全局变量专门用来管理各个组件对象的数据这块,每个组件对象通过操作这个专门管理数据的全局变量那样逻辑就会很明确。功能是功能,数据是数据。这就离vuex很近了,其实vuex本质上也相当于一个全局变量。

组件多且组件间数据耦合性强的场景

场景B:app内嵌H5需要做创建喜报的功能,分成了7个页面

  1. step1 单页面组件 填写基本信息
  2. step2 单页面组件 选择对应的关联项目(依赖step1里的一个参数)
  3. step3 单页面组件 选择项目规模(依赖step2的参数)
  4. step4 单页面组件 选择喜报模板
  5. step5 单页面组件 填写喜报标题等信息
  6. step6 单页面组件 step1-step5填写信息确认、有返回各个页面修改的入口
  7. step7 单页面组件 将 step1-step5填写的信息生成喜报预览,可发布或返回编辑

这里页面较多,数据之间可能相互影响,如果通过组件之间相互传值,显然很乱。如果使用vuex就会好很多,数据统一在vuex中处理,每个页面共享对应的数据,很好取。

同页面中不同组件数据依赖的问题

在一个页面中,拆分为了多个不同的组件,A组件需要显示B组件通过接口请求返回的数据的总数,如果利用组件间相互传值。可以用bus,但如果这个数据其他组件也要用呢?最好的方法还是通过vuex来管理数据,A组件在computed导入对应的state少字段。B组件获取到数据后,利用mutation更新该state数据,这样A组件页面会实时渲染对应state的值

为什么需要使用Vuex状态管理?

当多个组件共享状态时,单向数据流的简洁性很容易被破坏:

为了解决上面的问题,就需要用到Vuex了,Vuex把组件的共享状态抽取出来,以一个全局单例模式管理,不管在树的哪个位置,任何组件都能获取状态或者触发行为,这样就易于维护了。

全局对象也可以管理状态,为什么需要vuex?

Vuex和单纯的全局对象,有以下两点不同:

综上所述,什么情况下需要使用状态管理?多个组件之间数据相互依赖,多组件存在数据联动时 这样可以更加优雅的管理数据,可扩展性强

参考之前的笔记: vuex状态管理 - vue官网学习笔记