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