runsly 前端问答 2021-12-11

vuex的使用场景和属性有哪些

vuex的使用场景：1、用户的个人信息管理模块；2、电商项目的购物车模块；3、我的订单模块；4、在订单结算页。vuex属性有：1、state，用来存储变量；2、getters；3、mutations；4、actions；5、modules。

本教程操作环境：windows7系统、vue2.9.6&&vuex4.0.2版，DELL G3电脑。

vuex是什么？

vuex是一个用来管理组件之间通信的插件，它是一个专为【vue.js】应用程序开发的状态管理模式，它解决了组件之间同一状态的共享问题，它能够更好地在组件外部管理状态。

为什么需要vuex？

当多个组件依赖于同一个状态时，由于多层组件之间的嵌套使得传参数的方法变得更加复杂，另外如果使用父子组件直接饮用或者通过事件来变更和同步状态的多酚拷贝，会使得该模式变得脆弱，从而无法维护代码。

什么时候什么情况下使用vuex？

构建一个中大型单页应用，需要考虑到如何更好地在组件外部管理状态。

注意：如果不是开发大型单页应用，使用vuex可能是繁琐冗余的，也就是本来很快就可以开发完成的项目，用了vuex，结果却复杂了。一般简单的store模式就可以了。

vuex的五大属性

state, getters, mutations, actions, modules。

1. state：vuex的基本数据，用来存储变量

2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。

回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

vuex使用的场景：

用户的个人信息管理模块；
电商项目的购物车模块，每次都调用获取购物车数量的接口(前提得有)，效果是实现了,但是每一次的HTTP请求,都是对浏览器性能消耗。对比下来,用vuex的mutations进行触发,就显得更加有优势；
我的订单模块，订单列表也点击取消订单，然后更新对应的订单列表，这种情况也是用Vuex，state储存一个状态，监听这个状态，变化时更新对应的列表；
从订单结算页，进入选择优惠券的页面，选择优惠券的页面。如何保存选择的优惠券信息？state保存优惠券信息，选择优惠券时，mutations提交，在订单结算页，获取选择的优惠券，并更新订单优惠信息；