vuex - 学习日记
一、简单理解
简单说vuex,就是用来管理组件状态的数据,并且能在你可掌控的范围下增删改查这些数据。
store容器 , state状态
二者关系(包含):
以前我也把vuex里边的state看成是一个全局对象的感觉,就像全局变量所有页面都能用一样,所有组件都能使用它。
但是他和全局对象的区别有两点,概括来说:
1. Vuex里边的数据是和使用它的视图,关系密切,心有灵犀。属于藕断丝还连的亲密。
改变了state里边的数据,视图里边的展示就能跟着改变。是不是很强大。
而全局对象的改变也能修改视图的展示。但是他俩之间需要一个媒介,你得自行监控全局对象的改变来修改展示。
2. 鉴于二者关系密切,Vuex是不能你想动就动的,支配他得需要专门的“法物”--mutations的commit
二、核心概念:
1)state 概括如下:
“单一状态树”
一个项目中只能有一个
是所有组件公用的数据源
Vuex 的状态存储是响应式的
如何在 Vue 组件中展示状态:从 store 实例中读取状态并在计算属性中返回这个状态
computed: {
count () {
return this.$store.state.count
}
}
当store.state内状态值变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。
2)getter
可以认为是 store 的计算属性
getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。就像计算属性一样
3)mutation
更改Vuex 的 store 中的状态的唯一方法是提交 mutation
官网文:“每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数”
这句话的代码解释如下:
源码与解析对比图:
state:获取store中的状态数据
payload-载荷:多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读;
事件注册:
store.commit(‘state’,{ payload: ‘载荷’ });
4)action
由于mutation必须是同步的,这就给了action成长的机会,
因为action虽然和mutation差不多,但是它支持异步啊!
而且action,是通过提交(操控)mutation来更改state的状态,而不是自己上去直接搞,可以说是很机智的了。
接受参数 - context 对象: 与 store 实例具有相同方法和属性。
也就是说可以拿他当store用,或者也可以直接将其命名为store。
但注意,他确不是store本尊
分发 Action:
this.$store.dispatch('mutationFunctionName')
action的高级之处:我们可以在 action 内部执行异步操作
action(context) { //异步操作
setTimeout(() = >{ //变更状态
context.commit('mutationFunName',value) }) }
store.dispatch:
可以处理被触发的 action 的处理函数返回的 Promise
store.dispatch 仍旧返回 Promise
三、关键记忆点:
* store 中的状态是响应式的
* 最好提前在你的 store 中初始化好所有所需属性。
* 调用 store 中的状态:仅需要在组件的计算属性中返回即可,
因为当store.state内状态值变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。
* 触发变化:在组件的 methods 中提交(commit) mutation
* 将所有的状态放入 Vuex? 错,如果有些状态严格属于单个组件,最好还是作为组件的局部状态。
* mutation 必须是同步函数,比如store.commit('increment') ,
提交这一下,那么任何由 "increment" 导致的状态变更都应该在此刻完成。而不能再执行回调函数啥的了。
2018-04-07 17:49:23
vuex - 学习日记的更多相关文章
- Linux学习日记-使用EF6 Code First(四)
一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是 请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...
- android学习日记05--Activity间的跳转Intent实现
Activity间的跳转 Android中的Activity就是Android应用与用户的接口,所以了解Activity间的跳转还是必要的.在 Android 中,不同的 Activity 实例可能运 ...
- android学习日记03--常用控件Dialog
常用控件 9.Dialog 我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框 对话框,要创建对话框之前首先要创建Bui ...
- android学习日记03--常用控件checkbox/radiobutton
常用控件3.checkbox 复选框,确定是否勾选,点击一下勾选,点击第二下取消,当有一系列备选项时适合用checkbox控件,方便用户提交数据. 贴上例子Activity的java代码 packag ...
- android学习日记03--常用控件button/imagebutton
常用控件 控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者.方法则是控件的一些简单而可见的功能.所有控件都是继承View类 介绍android原生提供几种常用的控件bu ...
- Zend Framework学习日记(2)--HelloWorld篇(转)
Zend Framework学习日记(2)--HelloWorld篇 这一篇主要演示如何用zf命令行工具建立一个基于Zend Framework框架的工程,也是我初学Zend Framework的小练 ...
- Zend Framework学习日记(1)--环境搭建篇(转)
Zend Framework学习日记(1)--环境搭建篇 (1)开发工具 Zend Framework框架:http://framework.zend.com/download/latest 包含2个 ...
- Python 学习日记(第三周)
知识回顾 在上一周的学习里,我学习了一些学习Python的基础知识下面先简短的回顾一些: 1Python的版本和和安装 Python的版本主要有2.x和3.x两个版本这两个版本在语法等方面有一定的区别 ...
- 配置ssh免密码登录——集群学习日记
度过了难熬的考试月时期之后,最近和小伙伴一起参加的的比赛进入了紧张的准备时期.在进行工作的时候,发现有很多基础的知识点,自己不是很清楚以及了解,所以在想,要不就边学习的时候边写下学习日记,以供自己后来 ...
随机推荐
- 用js实现table内容从下到上连续滚动
网上有很多用ul实现新闻列表滚动的例子,但是很少有直接用table实现列表内容滚动的例子,而Marquee标签滚动的效果不是很好,于是就自己写了一个,提供给攻城师朋友们参考 实现思路:由于table包 ...
- LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法
LigerUI已经研究了一段时间,总体感觉还不错,基于jQuery开发,框架提供了丰富的UI组件,尤其LigerUI表格,功能还是挺强大的 在使用LigerUI可编辑表格的时候,发现一个小小的问题 当 ...
- Some Java exceptions, messages and errors.
http://www.antapex.org/messages_java.txt http://www.jvmmonitor.org/index.html
- yum更换国内源 yum下载rpm包 源码包安装
7.6 yum更换国内源 7.7 yum下载rpm包 7.8/7.9 源码包安装 yum更换国内源 cd /etc/yum.repo.d/ 删除源 rm -f dvd.repo rm -f C ...
- Linux 系统目录介绍
bin : bin 是Binary 二进制的缩写,就是可执行文件了.Bin目录下是用户常用的命令. sbin: 此目录下也是二进制文件 ,不过这里的命令是 超级用户如 root 这样的用户使用的. e ...
- 用instr 直接取最右端的点的位置:
用instr 直接取最右端的点的位置: SQL> select substr('/upload/UserFiles/..ea85a945e72bc71fcffca399_140.jpg',ins ...
- IP冲突解决方案
客人在我所供职的酒店上网的时候,经常会弹出一个对话框,显示一些提示,如上网的注意事项和消费标准等信息;并且有自己的电影和歌曲服务器,DHCP-server也是其中的一台服务器,宾馆.酒店就是用这台机器 ...
- 谈谈Android NDK中动态链接库(.so文件)的优化
做了不少NDK相关的工作,不知道别人有没有同样的困惑,经常在编译C/C++代码的时候会出一些error或者warning,然后在网上搜,发现在Android.mk或者Application.mk文件中 ...
- Node.js版本管理工具 nvm
1. 下载安装 curl curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash wge ...
- session没保存,登录失败
今天发现做的项目,登录不上 查了下原因,原来是session没保存上 查看php.ini文件,session.save_path="D:\php\tmp\tmp" 查看了下对应的目 ...