vue2.x学习笔记(三十)
接着前面的内容:https://www.cnblogs.com/yanggb/p/12682902.html。
状态管理
类Flux状态管理的官方实现
由于状态零散地分布在许多组件和组件之间的交互中,大型应用的复杂度也经常逐渐增长。为了解决这个问题,vue提供了vuex:受到Elm启发的状态管理库。vuex甚至被集成到vue-devtools中,无需配置即可进行时光旅行调试(time travel debugging)。
如果你是来自React的开发者,你可能会对vuex和redux之间的差异表示关注。redux是react生态环境中最流行的flux实现,redux事实上无法感知视图层,所以它能够轻松地通过一些简单的绑定与vue一起使用。vuex的区别在于它是一个专门为vue应用设计的状态管理工具,使得它能够更好地与vue进行整合,同时提供简洁的api和改善过的开发体验。
简单状态管理起步使用
一个经常被忽略的细节是,vue应用中原始的data对象的实际来源——当访问数据对象的时候,一个vue实例只是简单的代理访问。所以,如果你有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享:
var sourceOfTruth = {} var vmA = new Vue({
data: sourceOfTruth
}) var vmB = new Vue({
data: sourceOfTruth
})
现在当sourceOfTruth发生变化,vmA和vmB都将自动地更新引用它们的视图。子组件们的每个实例也会通过【this.$root.$data】去访问。现在我们有了唯一的数据来源,但是调试将会变为噩梦。任何时间,我们应用中的任何部分,在任何数据改变之后,都不会留下变更过的记录。
为了解决这个问题,我们可以采用一个简单的store模式(vue为了管理状态的一个自定义特殊语法):
var store = {
debug: true,
state: {
message: 'Hello!'
},
setMessageAction (newValue) {
if (this.debug) console.log('setMessageAction triggered with', newValue)
this.state.message = newValue
},
clearMessageAction () {
if (this.debug) console.log('clearMessageAction triggered')
this.state.message = ''
}
}
需要注意,所有store中state的改变,都放置在store自身的action中去管理。这种集中式状态管理能够被更容易地理解哪种类型地mutation将会发生,以及它们是如何被触发的。当错误出现的时候,我们现在也会有一个log记录在出现bug之前发生了什么。
此外,每个实例/组件仍然可以拥有和管理自己的私有状态:
var vmA = new Vue({
data: {
privateState: {},
sharedState: store.state
}
}) var vmB = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
重要的是,注意你不应该在action中替换原始的状态对象——只有组件和store引用的是同一个共享对象(指的是在内存中的地址一致),mutation才能够被观察。
接着我们继续延申约定,组件不允许直接修改属于store实例的state,而应该执行action来分发(dispatch)事件通知store去改变,这才是最终达成了Flux架构。这样约定的好处是,我们能够记录所有store发生的state改变,同时实现能够做到记录变更(mutation)、保存状态快照、历史回滚/时光旅行的先进调试工具。
关于状态管理,官方文档仍然是强调的使用其提供的vuex。
"我还是很喜欢你,像钗头凤搁浅绝笔,相思成疾。"
vue2.x学习笔记(三十)的更多相关文章
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- angular学习笔记(三十)-指令(1)-概述
之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...
- 【Unity 3D】学习笔记三十五:游戏实例——摄像机切换镜头
摄像机切换镜头 在游戏中常常会切换摄像机来观察某一个游戏对象,能够说.在3D游戏开发中,摄像头的切换是不可或缺的. 这次我们学习总结下摄像机怎么切换镜头. 代码: private var Camera ...
- 【Unity 3D】学习笔记三十:游戏元素——游戏地形
游戏地形 在游戏的世界中,必然会有非常多丰富多彩的游戏元素融合当中. 它们种类繁多.作用也不大同样.一般对于游戏元素可分为两种:经经常使用.不经经常使用.经常使用的元素是游戏中比較重要的元素.一般须要 ...
- 【Unity 3D】学习笔记三十八:角色控制器
角色控制器 在unity中,已经帮我们实现的上下左右跳等动作,并将他们封装成了角色控制器.角色控制器保存在unity标准资源包中,能够说是很的强大.能够模拟第一或者第三人称视角.不受刚体的限制,很适用 ...
随机推荐
- 【开源】使用Angular9和TypeScript开发RPG游戏(20200410版)
源代码地址 通过对于斗罗大陆小说的游戏化过程,熟悉Angular的结构以及使用TypeScript的面向对象开发方法. Github项目源代码地址 RPG系统构造 ver0.03 2020/04/10 ...
- jQuery实现回车键抬起触发事件
$(function(){ //回车键按下触发 $(document).keydown(function(event){ if(event.keyCode==13){ alert("niha ...
- Serverless无服务器云函数入门唠叨
B站录了个视频: https://www.bilibili.com/video/av59020925/
- Linux学习,path,环境变量的配置
方法一: 1.查看当前环境变量配置的所与信息 echo $PATH 注意: echo是输出的意思 加$表示它是一个变量 2.配置环境命令 PATH="$PATH":comdir 注 ...
- 29.2 Iterator 迭代器ConcurrentModificationException:并发修改异常处理
/** Iterator:迭代器* * 需求:判断集合中是否包含元素java,如果有则添加元素android * Exception in thread "main" java.u ...
- 让 .NET 轻松构建中间件模式代码(二)
让 .NET 轻松构建中间件模式代码(二)--- 支持管道的中断和分支 Intro 上次实现了一个基本的构建中间件模式的中间件构建器,现在来丰富一下功能,让它支持中断和分支,分别对应 asp.net ...
- vueCli 运行报错
error 如下: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! shopping@0.1.0 serve: `vue-cli-service ...
- AJ学IOS 之tableView的下拉放大图片的方法
AJ分享,必须精品 一:效果 tableview下拉的时候上部分图片放大会 二:代码 直接上代码,自己研究吧 #import "NYViewController.h" //图片的高 ...
- Tcxgrid使用例子
1.更改某个单元格的值后,其他单元格的值也相应改变 直接点击单元格进行更改值,然后在改单元格增加相应的事件: procedure Tfrm_BarCode_makecl5.gdtv_1select_t ...
- CTF中的命令执行绕过
本位原创作者:Smity 在介绍命令注入之前,有一点需要注意:命令注入与远程代码执行不同.他们的区别在于,远程代码执行实际上是调用服务器网站代码进行执行,而命令注入则是调用操作系统命令进行执行. 作为 ...