一、简单理解

简单说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 - 学习日记的更多相关文章

  1. Linux学习日记-使用EF6 Code First(四)

    一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是  请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...

  2. android学习日记05--Activity间的跳转Intent实现

    Activity间的跳转 Android中的Activity就是Android应用与用户的接口,所以了解Activity间的跳转还是必要的.在 Android 中,不同的 Activity 实例可能运 ...

  3. android学习日记03--常用控件Dialog

    常用控件 9.Dialog 我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框 对话框,要创建对话框之前首先要创建Bui ...

  4. android学习日记03--常用控件checkbox/radiobutton

    常用控件3.checkbox 复选框,确定是否勾选,点击一下勾选,点击第二下取消,当有一系列备选项时适合用checkbox控件,方便用户提交数据. 贴上例子Activity的java代码 packag ...

  5. android学习日记03--常用控件button/imagebutton

    常用控件 控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者.方法则是控件的一些简单而可见的功能.所有控件都是继承View类 介绍android原生提供几种常用的控件bu ...

  6. Zend Framework学习日记(2)--HelloWorld篇(转)

    Zend Framework学习日记(2)--HelloWorld篇 这一篇主要演示如何用zf命令行工具建立一个基于Zend Framework框架的工程,也是我初学Zend Framework的小练 ...

  7. Zend Framework学习日记(1)--环境搭建篇(转)

    Zend Framework学习日记(1)--环境搭建篇 (1)开发工具 Zend Framework框架:http://framework.zend.com/download/latest 包含2个 ...

  8. Python 学习日记(第三周)

    知识回顾 在上一周的学习里,我学习了一些学习Python的基础知识下面先简短的回顾一些: 1Python的版本和和安装 Python的版本主要有2.x和3.x两个版本这两个版本在语法等方面有一定的区别 ...

  9. 配置ssh免密码登录——集群学习日记

    度过了难熬的考试月时期之后,最近和小伙伴一起参加的的比赛进入了紧张的准备时期.在进行工作的时候,发现有很多基础的知识点,自己不是很清楚以及了解,所以在想,要不就边学习的时候边写下学习日记,以供自己后来 ...

随机推荐

  1. ubuntu 安装 SVN 后的错误:Subversion Native Library Not Available & Incompatible JavaHL library loaded

    问题一 安装了SVN的eclipse插件,使用的时候就会弹出一个错误的提示框:  Subversion Native Library Not Available,加载不到JavaHL.   解决方法 ...

  2. Xianfeng轻量级Java中间件平台:一期开发计划

    关于Xianfeng轻量级Java中间件平台,考虑到需要控制开发周期,通过分期开发的方式来实现一些基础的.常用的功能,这样有利于跟踪开发计划.一期的开发计划,主要实现的目标如下: 系统架构: 1.确定 ...

  3. 混合线路接入时,360、QQ管家等测速显示电信IP或任意线路的IP

    最近很多人QQ上问我,我有电信.联通接入,用户测速的时候有的时候显示联通的IP,可是我想让他显示为电信的IP,怎么办? 3年前开始使用联通的线路时,就这样设置了,有些人还拿这个设置当宝贝了???? 其 ...

  4. 2015-10-07:几乎100%肯定:百度网盘在夜间的时段是不限速的:早晨7点前很轻松达到3M/S,7点后就降低到1M/S了,白天才400K/S左右

    最近发现(2015-10-07)几乎100%肯定:百度网盘在夜间的时段是不限速的:早晨7点前很轻松达到3M/S,7点后就降低到1M/S了,白天才400K/S左右

  5. Lua string库详解

    1. string库中所有的字符索引从前往后是1,2,...;从后往前是-1,-2,...2. string库中所有的function都不会直接操作字符串,而是返回一个结果 string.byte(s ...

  6. 理解firewall

    http://blog.csdn.net/dream361/article/details/54022470  //firewall介绍 http://www.jb51.net/article/103 ...

  7. python使用tkinter写带界面的工具

    python一般用来写纯脚本的居多,但也可以做有视图的产品出来,例如做网页和客户端工具.做成工具的好处是,让不懂代码的人也能使用,不需要去修改代码里面的参数,如果使用次数频繁,甚至比纯脚本跟节约时间: ...

  8. MAP参数估计

    (学习这部分内容大约需要40分钟) 摘要 在贝叶斯参数估计中, 除了先验是特别选定的情况下, 通常要积分掉所有模型参数是没有解析解的. 在这种情况下, 最大后验(maximum a posterior ...

  9. uploadify在火狐下上传不了的解决方式,java版(Spring+SpringMVC+MyBatis)具体解决方式

     因为技术选型的原因,在一个产品中.我选择了uploadify,选择它的原因是它有完好的技术文档说明(http://www.uploadify.com/documentation/),唯一不足的是 ...

  10. PostgreSQL的表空间

    1. 表空间的概念 PostgreSQL中的表空间允许在文件系统中定义用来存放表示数据库对象的文件的位置.在PostgreSQL中表空间实际上就是给表指定一个存储目录. 2. 表空间的作用 官方解释 ...