大白话理解Vuex
理解 Vuex
2023-09-27 14:26:05 时间
大白话理解Vuex
原文:https://mp.weixin.qq.com/s/askQxPHeKA-yyNAbwYYTvQ
几个关键字段的含义
1. vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。
白话:vuex就是帮我们存储一下多个组件共享的数据,方便我们对其读取和更改。
2. State
官方解释:Vuex使用单一状态树,用一个对象就包含了全部的应用层次状态。它便作为一个唯一的数据源而存在。这也就意味着, 每个应用将仅仅包含一个store实例。
白话:组件中所要共享的数据,我们就会抽取一个store,而state即是我们可以共享的数据。
3. Mutations
更改Vuex的store中的状态的唯一方法是提交mutation。
Vuex中的mutation非常类似于事件:每个mutation都有一个字符串的事件类型和一个回调函数。
这个回调函数就是我们实际进行状态更改的地方。并且它会接受state第一个参数。
白话:可以理解为更改state的唯一途径就是mutation(同步)
4. Actions
类似于Mutation,不同在于:
- Action提交的是mutation,而不是直接更改状态
- Action可以包含任意一步操作
白话:Actions也可以更改state,但是是通过commit,提交到mutation,不直接更改(异步)
5. Getters
Vuex 允许我们在 store 中定义getter
(可以认为是 store 的计算属性)。
就像计算属性 computed
一样,getter
的返回值会根据它的依赖被缓存起来。
且只有当它的依赖值发生了改变才会被重新计算。
6. mapState
是一个辅助函数,当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。
为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性。
白话:即帮我们获取对应的state值
7. mapAction
是一个辅助函数,个人觉得比 dispatch 使用起来方便,主要是创建组件方法分发action,推荐使用。
相关文章
- 转载:2.2.4 配置项的单位《深入理解Nginx》(陶辉)
- 前端工程师理解
- 面试官:谈谈你对领域模型设计(DDD)的理解和心得
- 8张图带你深入理解Java
- Improving Opencv9 Eroding and Dilating 和对opencv窗体上有控制按钮的理解
- android clipRect Op.xxx各个参数理解
- 本书版权输出到台湾地区,《深入理解Android内核设计思想》诚挚感谢大家一直以来的支持!
- Spring Boot2 系列教程(四)理解Spring Boot 配置文件 application.properties
- 对ContentProvider中getType方法的一点理解
- 地球坐标系与投影方式的理解(关于北京54,西安80,WGS84;高斯,兰勃特,墨卡托投影)(转)
- 99%的人都理解错了HTTP中GET与POST的区别
- [Oracle]理解undo表空间