0

0

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

青灯夜游

青灯夜游

发布时间:2021-09-15 15:10:37

|

5290人浏览过

|

来源于php中文网

原创

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

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

本教程操作环境: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的基本数据,用来存储变量

杰易CRM客户关系管理系统
杰易CRM客户关系管理系统

软件介绍 a.. 当今的市场压力迫使企业在提高产品质量和性能的同时,降低成本和缩短产品上市的时间。每个企业都在努力更新自己,包括其生产过程和产品,以满足这些需求。实现这些目标的三种方法是:业务处理再设计、新技术应用、与顾客形成战略联盟。 b.. 对所有的商业应用只有建立整体的IT体系结构,才能形成战略优势,才能确定企业的突破口。这种新的体系结构是以三层结构标准为基础的客户关系

下载

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

相关推荐:《vue.js教程

相关文章

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
云朵浏览器入口合集
云朵浏览器入口合集

本专题整合了云朵浏览器入口合集,阅读专题下面的文章了解更多详细地址。

0

2026.01.20

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

20

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

62

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

87

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

39

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

10

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

13

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

19

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

160

2026.01.18

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 6.8万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号