网站首页 > 技术文章 正文
what is Vuex ?
这句话我想每个搜索过Vuex官网文档的人都看到过,
在学习源码前,当然要有一些前提条件了。
- 了解Vuex的作用,以及他的使用场景。
- 会使用Vuex,对基本API熟练掌握。
- 有一颗求知的内心(balabla的)。
Vuex我们通常称之为状态管理模式,用于解决组件间通信的以及多组件共享状态等问题。官网文档中注明的场景十分影响框架开发的整体脉络,也就是这个框架从一开始做就想解决这些问题,
Vuex的核心API有哪些?
(=》 符号代之类比 ->符号代表 在vuex提供的辅助函数)
- state : 数据仓库,所有的数据都存在这里。 =》 vue对象的data。
- getters :可以搭配仓库中的数据结合起来联动相应的数据 =》 vue的计算属性 =》 mapGetters
- mutation :更新数据仓库中的数据 -> mapMutations
- action :负责异步操作(网络请求、定时器等内容)调用mutation来更新数据 -> mapActions
- modules : 模块模式 提供了命名空间 使状态管理支持了树形结构。(画重点)
把这些API分成俩大类:
- 负责向Vuex中输入。
- 从Vuex中获取数据使用。
action 与 mutation 解决了所有向Vuex更新数据的方式(同步与异步)。
getters 与 state 解决了vue组件(也可以是vuex内部)从Vuex获取数据。
modules呢 当然不属于这两大类,它是一个基石,他让Vuex有了树形结构,
你可以将Vuex组织成一个模块,每个模块都有action、mutation、getters、state等方法。模块之间有了父子关系。
以上这些都是针对于Vuex内部的一些方法,可以在Vuex的实例上使用。
Vuex的实例一般都会挂载到Vue对象上。
辅助函数
为了方便使用Vuex还提供了一组辅助函数
在使用Vue进行开发的时候,我们有大量的states、getters、mutations、actions要使用,每个都使用vuex实例去调用会浪费很多代码,尤其是在使用了命名空间(namespaced)之后,vuex实例去调用这些方法都要加上对应的命名空间,所以就有了以下四个方法,接收一个namespace(可以为空),也就是命名空间前缀,以及一个对象、或者数组。
- mapState 为组件创建计算属性以返回 Vuex store 中的状态。
- mapGetters 为组件创建计算属性以返回 getter 的返回值。
- mapMutations 创建组件方法分发 action。
- mapActions 创建组件方法提交 mutation。
以上几个方法都是为Vue组件遍历使用而产生的。
但是还不够极致,每个都要写命名空间,
辅助函数还提供了createNamespacedHelpers。创建指定命名空间的辅助函数,
总结
Vuex的功能首先分为两大类:
- Vuex自己的实例使用 getters、mutations、actions
- Vuex为组件中使用便利而提供的辅助函数 mapGetters、mapMutations、mapActions、mapState、createNamespacedHelpers
Vuex自己内部对数据状态(state)有两种功能:
- 修改数据状态 action:异步 mutation : 同步。
- 获取数据状态 getter : 可以经过计算 state : 直接返回数据状态。
Vuex支持的模式:模块模式 modules,为Vuex提供树形结构,以及命名空间,帮助Vuex层级分明。
猜你喜欢
- 2024-10-11 JavaScript实现的转盘抽奖html页面前端源码
- 2024-10-11 前端录屏 + 定位源码,帮你快速定位线上 bug
- 2024-10-11 css+JavaScript实现的二级导航菜单html页面前端源码
- 2024-10-11 交互问卷表单设计html页面前端源码
- 2024-10-11 web前端实战项目(免费送源码+视频)
- 2024-10-11 html5+css3做的响应式企业网站前端源码
- 2024-10-11 小程序源代码:实现一个简易版QQ的前端页面,文末有代码
- 2024-10-11 Dive Into Code: VSCode 源码阅读(一)
- 2024-10-11 web前端:vue源码解析,vue-cli父子组件传递模板
- 2024-10-11 一个月学会web前端(免费送视频+源码)
你 发表评论:
欢迎- 501℃几个Oracle空值处理函数 oracle处理null值的函数
- 494℃Oracle分析函数之Lag和Lead()使用
- 493℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 482℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 473℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 468℃【数据统计分析】详解Oracle分组函数之CUBE
- 453℃Oracle有哪些常见的函数? oracle中常用的函数
- 448℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 最近发表
-
- Spring Boot跨域难题终结者:3种方案,从此告别CORS噩梦!
- 京东大佬问我,SpringBoot为什么会出现跨域问题?如何解决?
- 在 Spring Boot3 中轻松解决接口跨域访问问题
- 最常见五种跨域解决方案(常见跨域及其解决方案)
- Java Web开发中优雅应对跨域问题(java跨域问题解决办法)
- Spring Boot解决跨域最全指南:从入门到放弃?不,到根治!
- Spring Boot跨域问题终极解决方案:3种方案彻底告别CORS错误
- Spring Cloud 轻松解决跨域,别再乱用了
- Github 太狠了,居然把 "master" 干掉了
- IntelliJ IDEA 调试 Java 8,实在太香了
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端富文本编辑器 (47)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)