什么时候该用vuex?
Vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 官方是这么介绍的 为什么要判...
Vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 官方是这么介绍的
为什么要判断什么时候使用Vuex
很简单的道理,你总不能什么时候都使用Vuex吧。 鲁迅说: --当你无法很好进行数据管理的时候,你才需要用Vuex
但是,使用应用场景该如何判断?
我已经用vue vuex进行起码四五个项目的编写和上线了。以下是我一些个人的判断使用场景的心得
1、当一个组件需要多次派发事件时
为什么说?多次派发事件需要用到vuex?原因很简单,如果它多次派发事件,必然有其它组件进行接收并调用。 如果是一个组件进行接收和调用还好,但是如果两个?三个?甚至四个呢? 如果派发事件的组件只是派发一个事件,那还比较好管理,一旦进行多次派发那么维护的难度会以乘法增加
栗子:
此处的购物车的数量需要用vuex。我想很多人有疑问,what?这么简单的东西都需要vuex,来管理? 容我介绍触发的场景 1、在首页、分类、商品详情页添加商品需要触发一次 2、在购物车进入编辑状态,删除购物车项,需要触发一次 3、在结算订单时,需要触发一次 在首页、分类、商品详情页、删除购物车项、结算订单总共就触发了6次 用vuex的mutations的触发,控制状态的就很清晰明了,并可以维护性很高反之,如果每次都调用获取购物车数量的接口(前提得有),效果是实现了,但是每一次的HTTP请求,都是对浏览器性能消耗。 对比下来,用vuex的mutations进行触发,就显得更加有优势
以下对应触发的场景图
归根结底: 是为了以后的方便维护,你想想啊。万一你那天要改,其它四五个地方需要改动。等项目越来越大,加入购车的地方就会越来越多。 保持一个设置购物车数量,那么再多的情况,你都可以清晰地那里是设置购物车数量并且需要修改去哪里修改
2、跨组件共享数据、跨页面共享数据
在开发Vue项目的时候,已经发现很多次。存在这种情况 封装了一个基础组件(即很多地方会用到),根据不用的业务派发不同的事件。但是发现,有时想派发事件都不行,因为父组件根本就没有引用。 没有引用父组件跟获取当前派发事件,并更新数据呢? 当然了,是用Vuex
栗子:
1、当前是订单列表页,订单列表也点击取消订单,然后更新对应的订单列表 2、订单详情点击取消按钮,怎么更新对应的订单列表? 不要说每次进入订单列表页面都重新数据,那太浪费性能 这种情况也是用Vuex,state储存一个状态,监听这个状态,变化时更新对应的列表
栗子:
1、从订单结算页,进入选择优惠券的页面 2、选择优惠券的页面如何保存选择的优惠券信息? 3、保存到本地?也行,但不建议保存到本地,如果有人使坏就很麻烦。当然了,肯定会有那么无聊的,你不要说肯定没有。不要问为什么我会知道 state保存优惠券信息,选择优惠券时,mutations提交,在订单结算页,获取选择的优惠券,并更新订单优惠信息当然了,使用并不只有两个。但大多数情况的时候。
为什么,其它情况不写下来。只是因为一时半会想不起来,而且,我也不想写了。 等你把这两种之后,我觉得,是个人都能举一反三。
更多推荐
所有评论(0)