vuex , 简单入(liao)门(jie)
vuex什么 ?
官方的说法就是 vuex是专门为vue.js应用程序开发的 状态管理模式 。并采用集中式存储 , 管理应用的所有组件的状态 ,并以相同的规则保证状态以一种可预估的方式发生变化。
自己理解的就是 vue提供的 前端数据管理仓库 。
vuex中有五大核心概念 :
1. state
就是为了存储数据而存在的。包括全局所有的状态 (或者叫做数据源)
2.getter (可以认为是 store的计算属性) /* 补充:计算属性: 作用就是监听数据的变化 (个人理解), 每当state中的数据发生变化的时候都会重新求取计算属性 ,触发更新相关联的dom节点 */
与计算属性相似 , getter 的返回值会根据自身的依赖被缓存起来 , 只有当他的依赖发生变化时才会被重新计算
getter 被暴露后可以通过 store.getters 进行访问 (在组件中可以通过 this.$store.getters)
参数方面 : getter允许state作为第一个参数,也可以接受其他getter作为第二个参数
3.mutation
/* mutation是改变数据状态state的唯一方法 ,但是要注意的是mutation只支持同步方法 而不支持异步方法 */
关于mutation个人感觉官方文档说的很清楚 : (地址:https://vuex.vuejs.org/zh-cn/mutations.html)
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment
的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法
代码:store.commit('increment')
在组件中可以通过使用 this.$store.commit('xxx')
提交 mutation,或者使用 mapMutations
辅助函数将组件中的 methods 映射为 store.commit
调用(需要在根节点注入 store
)。
4.action
action类似于mutation 不同在于 :
1.action提交的是mutation (上面有说到 mutation是改变state的唯一方法), 而不是直接变更state(数据状态)
2.action可以包含任意的一部操作
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit
提交一个 mutation,或者通过 context.state
和 context.getters
来获取 state 和 getters。
action通过store.dispatch 方法来触发 代码如下:(括号中是要触发的action方法)
store.dispatch('increment')
分发action
在组件中分发action;
在组件中使用 this.$store.dispatch('xxx')
分发 action,或者使用 mapActions
辅助函数将组件的 methods 映射为 store.dispatch
调用(需要先在根节点注入 store
)
5.module
module是为了解决 当所有状态都聚集到一个大对象中时 , store对象会变得臃肿问题 而存在的。
vuex
推荐文章:https://zhuanlan.zhihu.com/p/24357762 (个人感觉说的非常通俗易懂好理解)
转载于:https://www.cnblogs.com/wangrenmeng/p/8995799.html
vuex , 简单入(liao)门(jie)相关推荐
- 《深度学习入门一》一入侯门深似海,深度学习深几许 2017-06-09 云栖社区 摘要: 当你和女朋友在路边手拉手一起约会的时候,你可曾想,你们之间早已碰撞出了一种神秘的智慧–深度学习。恋爱容易,相
<深度学习入门一>一入侯门深似海,深度学习深几许 2017-06-09 云栖社区 摘要: 当你和女朋友在路边手拉手一起约会的时候,你可曾想,你们之间早已碰撞出了一种神秘的智慧–深度学习.恋 ...
- python是什么类型的语言-Python是什么?简单了解pythonp-入门
原标题:Python是什么?简单了解pythonp-入门 简单了解python Python语言特色 1. Python是一门解释性语言 解释性语言:在系统中运行时需要使用解释器(如:php.java ...
- 前端简单入门第十八讲 使用jQuery实现表格的隔行换色
还记得之前我使用JavaScript来实现表格的隔行换色效果吗?如果读者初次翻阅本文,可记得看看前端简单入门第十二讲 使用JavaScript完成后台数据展示表格的隔行换色!现在我就来使用jQuery ...
- 一入侯门深似海,从此萧郎是路人
<赠婢> 唐:崔郊 公子王孙逐后尘,绿珠垂泪滴罗巾. 一入侯门深似海,从此萧郎是路人. 诗的首两句应该换个顺序翻译,绿珠是美女佳人的代称,泛指容貌姣好的女子,可是这么美丽的女子却在偷偷的哭 ...
- vuex简单入门:singer实例创建以及读写全过程
Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 原理图  对于原理图 ...
- Android 入个门
文章原载于我的个人博客,欢迎来访. 整理了一些Android很经典的几个问题. 其实是选修课作业,顺道吹一吹这门课( 附件:部分源代码 1.Android应用的基本组件有哪些? Activity:应用 ...
- 2020了,还要学JSP嘛?入个门呗!毕竟Servlet亲兄弟~
目录 1.什么是JSP 2.JSP原理 3.JSP基础语法 jsp表达式 jsp脚本片段 jsp声明 jsp注释 4.JSP指令 5.JSP行为 6.9大内置对象 7.EL表达式 格式 变量 [ ]与 ...
- python编程入门p-Python是什么?简单了解pythonp-入门
简单了解python Python语言特色 1. Python是一门解释性语言 解释性语言:在系统中运行时需要使用解释器(如:php.java) 编译性语言:在系统中运行不需要解释器,可以直接运行(如 ...
- 来,Consul 服务发现入个门(一看就会的那种)
前言 在微服务架构中,对于一个系统,会划分出多个微服务,而且都是独立开发.独立部署,最后聚合在一起形成一个系统提供服务.当服务数量增多时,这些小服务怎么管理?调用方又怎么能确定服务的IP和端口?服务挂 ...
- Vue.js先入个门看看
使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...
最新文章
- 一文应用 AOP | 最全选型考量 + 边剖析经典开源库边实践,美滋滋
- java核心编程视频教学
- UVa 1393 (容斥原理、GCD) Highways
- 机器学习知识点(九)BP神经网络Java实现
- boost::contract模块实现move的测试程序
- sdk开发包怎么使用_怎么使用 Buildroot 构建根文件系统?
- MP law simulation
- 初识循环神经网络(RNN)
- 阿里云CentOs 6.4 yum报错Couldn't resolve host'xx
- 【Hoxton.SR1版本】Spring Cloud Gateway之如何进行限流
- 软考数据库系统工程师复习资料(完全版)
- Go语言适合做什么?
- GetShell的姿势总结
- SCANV团队提供APPCMS安全漏洞独立补丁
- 【机器学习】逻辑回归案例一:保险与年龄之间关系分析
- java使用免费日期API获取当年节假日
- 7 11 藏尾诗c语言,为你写诗:11种杂体诗,汉语太神奇
- Oracle数据库表空间不足 ORA-01653:unable to extend table 表名称 by 8192 in tablespace 表空间名称
- Python 机器学习工具库
- 【干货】Excel根据条件变换颜色
热门文章
- 人脸验证(三)--FaceNet
- 图像形状特征(二)--Hu距
- 运动目标跟踪(三)--搜索算法优化搜索方向之Meanshift
- OSError: [WinError 126] 找不到指定的模块。【专治疑难杂症】
- 周期性行业是什么意思_什么样的股票适合长期持有?股票知识学习
- 【C++入门】C++ string类
- git remote命令入门
- kafka--Struct Streaming--hdfs案例
- Material Design控件使用
- 当攻击者采用新型逃避技术——“域遮蔽” 企业该如何应对?