没有合适的资源?快使用搜索试试~ 我知道了~
14_Vue全家桶 - Vuex状态管理.pptx
需积分: 5 0 下载量 25 浏览量
2024-01-25
11:09:48
上传
评论
收藏 982KB PPTX 举报
温馨提示
试读
29页
14_Vue全家桶 - Vuex状态管理
资源推荐
资源详情
资源评论
Vue全家桶 – Vuex状态管
理
目录
content
核心概念Mutations
5
1
Vuex的基本使用
2
核心概念State
3
核心概念Getters
4
核心概念Actions
6
核心概念Modules
7
在开发中,我们会的应用程序需要处理各种各样的数据,这些数据需
要保存在我们应用程序中的某一个位置,对于这些数据的管理我们就
称之为是 状态管理。
在前面我们是如何管理自己的状态呢?
在Vue开发中,我们使用组件化的开发方式;
而在组件中我们定义data或者在setup中返回使用的数据,这些数
据我们称之为state;
在模块template中我们可以使用这些数据,模块最终会被渲染成
DOM,我们称之为View;
在模块中我们会产生一些行为事件,处理这些行为事件时,有可能
会修改state,这些行为事件我们称之为actions;
什么是状态管
理
JavaScript开发的应用程序,已经变得越来越复杂了:
JavaScript需要管理的状态越来越多,越来越复杂;
这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等;
也包括一些UI的状态,比如某些元素是否被选中,是否显示加载动效,当前分页;
当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:
多个视图依赖于同一状态;
来自不同视图的行为需要变更同一状态;
我们是否可以通过组件数据的传递来完成呢?
对于一些简单的状态,确实可以通过props的传递或者Provide的方式来共享状态;
但是对于复杂的状态管理来说,显然单纯通过传递和共享的方式是不足以解决问题的,比如兄弟组件如何共享数据呢?
复杂的状态管
理
管理不断变化的state本身是非常困难的:
状态之间相互会存在依赖,一个状态的变化会引起另一个状态的变化,View页面也有可能会引起状态的变化;
当应用程序复杂时,state在什么时候,因为什么原因而发生了变化,发生了怎么样的变化,会变得非常难以控制和追踪;
因此,我们是否可以考虑将组件的内部状态抽离出来,以一个全局单例的方式来管理呢?
在这种模式下,我们的组件树构成了一个巨大的 “试图View”;
不管在树的哪个位置,任何组件都能获取状态或者触发行为;
通过定义和隔离状态管理中的各个概念,并通过强制性的规则来维护视图和状态间的独立性,我们的代码边会变得更加结构
化和易于维护、跟踪;
这就是Vuex背后的基本思想,它借鉴了Flux、Redux、Elm(纯函数语言,redux有借鉴它的思想);
当然,目前Vue官方也在推荐使用Pinia进行状态管理,我们后续也会进行学习
。
Vuex的状态管
理
剩余28页未读,继续阅读
资源评论
人生的方向随自己而走
- 粉丝: 2939
- 资源: 329
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功