什么时候该用vuex?

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提交，在订单结算页，获取选择的优惠券，并更新订单优惠信息

当然了，使用并不只有两个。但大多数情况的时候。

为什么，其它情况不写下来。只是因为一时半会想不起来，而且，我也不想写了。 等你把这两种之后，我觉得，是个人都能举一反三。