00:00
好嘞,各位求和案例的VIVO X版呢,我们已经写完了,当然了,现在写的只是一个最基础的版本,一会儿呢我们还会进行升级的,那在这一小节呢,主要想跟大家讲讲vvox开发者工具的使用,然后呢,再说几个大家可能会产生疑惑的地方,诶首先第一步呢,我们打开vvox的开发者工具,可能有一些同学说老师不对啊,你选这个,那不是view的开发者工具吗?你要给我讲的不是VX的开者工具吗?啊,这儿呢,说一下各位,就是我们所学的这个view,还有这个vvox啊,它都是官方所打造的,也就是说vvo X这个插件库也是view团队做的,所以说这两个东西的开发者工具呢,就合成了一个啊,你不用再下载一个工具了,还说叫做vvox的开发者工具,不用再下载了,他俩合成一个了,选项呢,确实都叫做view,但是你自己啊,心知肚明,这里边其实包含着VIVO X的开发者工具,来我们选择一下,在这里面这么多的选项卡里啊,我们用过两个了,各位。
01:00
第一个呢,是看组件的对吧,什么VMVC的这些关系,那么还有第三个选项卡,其实我们也用过了,各位是不是去看那个自定义事件的啊,大家想想子组件给父组件通过自定义事件传递数据的时候,或者说那个全局事件总件同学我们是不是都可以在这儿去观察出来每一个事件呢?啊,那这回呢,我们用一下第二个选项卡,诶鼠标放在这别动,它有一个提示叫切换到viewvo X视图,诶你点一下走就来到这个视图了,然后这里呢,分为两个区域啊各位这块呢叫做选择区,然后这块呢叫做展示区,你在选择区里面选择不同的内容,哎,那么展示区呢,就给你展示相应的内容,OK啊,那来我们看一下同学这个base state什么意思呢?哎,就是基本数据,说的再直白点就是VIEWX1上来里边有什么啊,默认就给你选中了,然后在下边,你看同学,State是不是叫做状态或者是数据啊,里边有什么呢?SUM0,这不都是当年我们写的吗啊。
02:00
然后呢,同学你点一下加啊,你看看效果,我给你连点三下啊,我选择的是一,然后我点击加啊,一下两下三下,同学你看你每一个动作呀,这块都有记录,然后你看这他说的是什么大写的加,那也就证明他在这儿收集到的其实是谁,是actionences里的动作还是mutations里的动作,同学看图说话回来一定是mutations里的对不对?我们之前为了把东西做区分,Mutations里面所有的方法名,我们是不是写的都是大写的,那你看这这加是不是大写的,这也就强有力的证明了人家这个图呢说的是准确的,我的d tos一直跟mutations进行对话,你actions里面有再多的东西被触发了,我在这儿也不去补货,你说它为啥这么设计呢?各位,很简单,因为开发者工具所关注的点就是你的数据到底是怎么改的,是不,而不是说你这边服务员是怎么服务客人的,是吧,各位,哎,也就是说就跟你上餐厅吃饭一样。
03:00
同学啊,有的时候可能服务态度不好一点,但是这饭好吃啊,对吧?啊,他管住了你的胃是吧?哎,好了,回来各位走,哎,都是大写的家,然后呢,你看啊,默认他给你选择的是最新的这个啊,你如果说老师我还想看基本数据,那你就点回来,你看下边给你呈现的就是基本数据,然后你选择这儿,各位,这是我第一次点加对吗?一上来是几零,我刚才选的数字是几一,然后我点了一次加,各位在这儿是不是应该得是一啊,看着鼠标点这儿走,就切换到这儿了啊同学,绿色的这个东西不跟着你动啊,绿色东西一动意味着页面也得跟着动,也就是说同学页面所呈现的这个数据一定是绿色这个条所在的那一刻,哎,就是最后那一下子啊,你点完了那个三,你点这呢,在这儿可以看数据,同学,你看state,那个时候state里的萨姆是几是一,然后这什么意思,Mutation修改吗?啊修改的值是一,说白了,你要加一吗?啊,那要加要减的,看这是type对吧,说的多明白呀,Mutation playload1type类型。
04:00
成加对吧,那你点这呢,走typeb类型加playload也是一,因为我一直选的是一嘛,但是这回变成几了呢?二你再选这是不是就三,哎,OK,然后呢,你再看啊,每一个人的后面都有三个按钮,诶一个两个三个,说说这些东西是干嘛的啊来从后往前说,各位啊,这有一个像秒表一样的东西,这叫时间线,你点了这个东西就能有一种感觉,时光穿梭了,同学你看这儿啊,这是不是基本数据,你看着我点这个时间线回来,那你发没发现?同学你这些动作虽然发生了,但是它已经不看了,一切都回到了最初的原点,主要观察页面是不是零,哎,你鼠标放在这儿,哎,比如说时光穿梭,我穿梭到你第一次点加号的时候,走这是不是就是一啊,那同理在这儿也能穿梭,你看你穿梭的时候,那个绿色条是跟着你走的,绿色条在哪儿,页面呈现的就是哪儿的数据,对不OK,这个按钮呢,说完了,然后呢,咱再说说第二个按钮啊,倒数第二个,这什么意思呢?好像有种感觉,好像是清空一样是吧?各位啊,说一下点击这个就是这一次的动作不要了,你比如说啊各位我点击这个我在哪点的,我在最后一次加一把它变成三的时候,这个位置点的啊来走那你看这个不要了,那不要了就当然回到哎它的上一次了,就是二,那这会儿我也不要了呢,那这就是这儿呗,对吧,那这我也不要了呢,基本数据,那基本数据不能不要是吧?各位,哎来刷新一波,再演示一下,但是这里啊有一个小问题,各位看着选择一连点三次,走走走啊来各位你瞧着,你说我刚才是这么点的啊说三不要了就是二啊二不要了呢,就是一,一不要了呢,就是基本,哎你说我要这么点呢,各位瞧着啊,123看长,我在这儿点这清空啊,就是第一次我不要了,你说这是什么后果呢?各位想想啊,你说这一次点击加我是不是得拿到基本数据进行加,我这一次点击加是不是得拿到上一次加的结果,那你说我这一次呢,同理,是不是得看。
05:58
碰一次啊,那你说如果你要是把这一条给它清空了,后果是这些人也跟着没,就有一种感觉,同学你把地基给废了,那这楼也得倒,对吧,我不管你多少层,所以说同学你看你点击这儿的时候,一点击这个不要紧,所有依赖这个人产生的数据,这个这个包括这个人自身都没了,你看着我点击一下,同学你看瞬间回到基本数据了,对吧?来,我再刷新一次啊,再点三次,走走走,同学你说我点这呢。
06:26
点谁谁没,以及依赖这个人计算出来的是不是都没呀,所以说我点了这个按钮之后啊,前两个会有,但是蓝色框里的这个是不是就没了呀,看效果对不?哎,好了,刷新还有一个按钮,我们给他说一下啊,就是在这儿同学你发现有一个像下载一样的按钮,对吧?这什么意思呢?啊来给大家说一下,我刚才是不是点了三次加,哎,然后呢,往下一点,各位我再点几个啊,比如说呢,我选择二,我再给他点两次二啊减二再减二,目前是不是负一,就有的时候啊,你的动作太多了,就是mutation计算了好多次,然后看起来就乱了,然后呢,同学你听我说啊,我只想分析这两次,然后前边那三次啊,我不关心了,那就可以这样做,同学,前边那三次是不是不关心了,那你就在这个里面啊,别在第一个里面啊,在前三个里面的最后一个地方去点这个,这叫合并的意思啊,它在这提示的是commit this mutation,就是提交这次mutation,其实就是你点了这个,来这个下载按钮啊,有点像下载这个按钮,点完了它之后这三个。
07:26
都合并到一起了,并且不给你呈现了,然后把这三个计算生成的东西给你丢到这里了,哎,就意思是,哎,一上来基本数据就啥啥啥,你看一下效果啊同学,我点击这儿走,你看这两个减留下来了,然后你看base date的时候,人直接告诉你就是三,但是其实我们明白base date是几零,然后是你点了三次加,然后才变成三的,在这就已经合并进去了,是这意思不,各位哎,OK啊,然后这儿呢,还有三个按钮,说一下这都什么意思啊各位,这个红色的按钮呢,代表记录呢,啥意思呢?就是你再点一下它就灰了,灰了的意思就是无论你在这儿加还是减,各位这个开发者工具都不去补货了,一般来说我们不会关的,开着就好,那这个是什么意思呢?就是这里面所有的都给它清掉,点击就都清掉了啊朱老师那base state,因为之前你合并进去了,所以说它在这儿还是三,但如果你没合并呢,那你看一下效果啊,来到这走走,走走是不是这么多次,目前是四吧,哎,我点击清空就都没了呗,哎,因为刚才你点了合并,你合并的意思就是那一堆。
08:26
操作都作为base去使用了,清也不会清掉的啊来再点几次啊123,那你说这啥意思啊各位,就是把这里所有的动作都合在这个里面对不对,当点一下的时候走,你看都合进去了是吧?哎,刷新还有两个按钮呢,给大家说一下,来再点两次啊,加个一加个二,再加个三啊那你看这个playload肯定是这是二,完了呢,这是三,然后呢,这是一对吧,还有这么两个按钮啊各位。这个。叫做导出,还有这个叫做导入,什么意思呢?就说你这里边有很多很多的数据,哎,然后你的代码呢,出毛病了啊,想让同事看一眼,哎,同事说那你那view X里面目前的数据是什么样的呀?然后你告诉人家,诶是这样的哥们,你听我说,我点了17下加啊,我点了六下减,我点了四下基数再加,我又点了80次,等一等再加,你这么一点就能出现我那个盒是多少多少,你也点一下啊,然后我再跟你说,这就特别麻烦是吧,万一这个里面同学保存的不是一个sum呢,是20多个数据呢,难道你告诉人家100多步完了,人家按照你这100多步都点一下完了,把数据啊形成你那个样子,完了再帮你去看问题,不可能的,在这儿有一个导出,同学,点一下就行啊,没有任何的提示,走这东西已经导出了,在哪呢?在你那个电脑的剪切板里,我刷新一波,哎,然后呢,我想让人家帮我调程序啊,人说那你那个VS里的数据,我说不用你点来,我把东西给你,然后选择导入,把东西往这一粘就可以了,那这为什么是一呢?是因为刚才我选择一导出的刷新,我们再来一下子。
09:54
走走走,应该是我选择这去导出,目前的是三是吧,来我点一下导出啊,然后呢,刷新一波,这回是干净的了,然后呢,我再选择这个导入,同学你看这啊,他有的时候它反应慢,他是不是说是一,我问你页面现在是几零,说老师这咋回事呢,你点一下它就好了,OK,诶在这呢,我再导入一下啊,选择导入走哎,应该是三,这回过来了吧,啊刚才应该是他没有反应过来啊,你摁一下ESC啊,他在这不告诉你了吗?摁一下ESC就给它关闭了,来那我摁一下走就关完了呗,数据就导进来了呗。哎,有的时候如果不准了,你就点它一下就可以了,OK同学,这就是开发者工具的使用,然后呢,再说几个大家可能会产生疑惑的地方啊,首先说第一个地方,就是关于啊,刚才我写的这个action里的这个上下文,哎,来同学我问一下啊,我目前是在action里面写的东西,对吧,那你说action里的东西,按照图来说,各位我都已经到达这个位置了,比如说加它所对应的那个函数啊,已经执行了,那你说按照我们。
10:54
的理解啊,各位,你说在这个函数里面,我是不是调一下commit就得了,然后整个流程是不是能走下去了?哎,就有同学感觉说老师那他就直接在这儿把commit给我呗,对不?Commit,然后在这儿我也别什么上下文了,对吧?老师给我commit多好啊,但是他为什么非得给我一个上下文呢?就表面上分析在这好像我只用这个commit就够了呀,我不用再用别的了,它怎么这么麻烦呢?啊,那同学咱们这样啊,我把这注掉,我把这上下文呀给你输出一下,完了咱们琢磨琢磨它为什么这么设计是吧,我知道现在代码能写下去,我知道也没报错,不得理解吗?好,保存这是什么基数,再加是不是好?回到页面里,各位啊,来到控制台刷新一波清掉,我得先让它变成基数是吧,然后我这个按钮才有作用啊啊给它清掉来看一下效果啊,各位走啊,你看输出的是什么,输出的是那个上下文对吧?哎,其实同学在这儿呢,我不让它是奇数也行,因为我的。
11:54
逻辑是写在这了,对吧,各位,我这判断不是写在这儿的嘛,哎,回来,所以说你不用的不让的是奇数也行啊,点一下走同学是不是来到这儿了,输出的是谁?我们研究的就是它这上下文呗,看看上下文里有什么啊,我们没学过的吧,你就别关注了,咱就关注一下目前咱学过的同学,Commit是不是用过,哎,Dispach来各位是不是用过?来同学他用没用过state呀,State那不是状态吗?不是数据吗?你打开里边肯定有some呀,同学这三个东西commit dispatch state是不是都用过,那咱就分析一下呗,为啥要给我这呀,为啥要给我这呀,这都啥意思呀?来同学琢磨一下啊,你说如果他只给你一个commit,那你就没得选了,就有一种感觉,一旦你进行到了这个环节啊,就是在这儿你进入了这个action里的这个加啊,这个函数,那就意味着你没有退路可言了,你就只能调commit是不是往下走了啊,那人家如果给了你这个dispatch呢,就证明还有点作用,什么作用呢?你看我给你写一下啊各位来回到这儿,我这有一个加。
12:54
DD的action啊同学,因为我写在actions里了嘛,那肯定都是action看着啊在这啊各位我给你写一个DEMO1ACTION,哎,然后呢,我再给你写一个DEMO2ACTION,好,接下来你瞧效果,既然他们都是action,我是不是可以这样做,粘过来粘过来,然后当你在页面里面啊,你去触发的时候,各位来回到这儿,你刚才点了这个按钮什么,呃,基数在加,然后是不是走的加ODD,哎,好嘞,回到这,同学这个加o DD action是不是响应你啊,响应你啊,因为它这个逻辑可能非常的复杂,现在不复杂啊,各位就是基数加就得了,那你说如果这里边逻辑特别复杂,它得处理很多的事情呢,啊,比如说在这儿我给你来一个consolo,叫做处理了一些事情啊,我用这一句话可能就顶了几十行代码,对不对,处理了一些事情,那如果再写的话,可能啊,这个action里的逻辑就太多了,这个action里的这个代码也特别多,就不好维护了,哎。
13:54
所以说各位人家给你设计这个dispach,就是把dispach放到他身上还是有作用的,什么作用呢?同学就写到这儿,哎,就这么多逻辑啊,就挺多了,不能再写了,那接下来怎么办呀来着,各位context继续thisch,哎,找谁呢?找一把谁接着往下传呢,这VALUE6,然后呢,就来到DEMO1这了,那DEMO1这儿呢,也得给他来输出这么一句话啊,处理了一些事情,在后边呢,给你加一个后缀杠杠,这叫做加ODD,这呢杠杠,哎叫做DEMO1,好了,哎,就假设这一行代码也是十好几行,好几十行,哎呀,处理了很多的问题,那接下来呢,哎,把这个复制再往下走,这叫做DEMO2,把value流再递过去,然后到了这个DEMO2这块,整个全都复制过来,把它这块呢给它粘过来,然后这些注释呢,给它解开啊,哎,注释呢给它解开,缩进呢,调一下各位你看我把东西放在这儿,这有一种感觉,这块是最先响应用户动作的。
14:54
但是由于里边的业务逻辑啊太复杂了,他就只能再找另外一个action接着处理,这个处理完了呢,再找他接着处理,有一种感觉同学三个服务员同时在忙活,你是这意思不来看图说话,我到这儿各位是不是进入了家啊,家处理了一会儿,发现逻辑太多了,自己只能处理一部分,继续把东西给DEMO1 demo1发现,诶还是不行,再找DEMO2,然后最后DEMO2处理完了,我问你各位最后是不是才commit哎,图上的体现好像服务员只能有一个,实际上啊,他可以有一堆对不?各位理解理解,这个呢是给你点菜的对吧?这个呢是给你上菜的,这个呢是你用餐期间为你服务的,是这意思不?哎,所以说我们整体看一下效果啊,各位把这呢我再复制一下啊,往这儿呢,也放一下叫做DEMO2,你整体感受一下啊,我点那个基数加的时候刷新一波清掉,不用给它变成那个基数了,直接点啊走各位你看首先这个先响应,然后处理一些事情,再处理再处理对不对,是一个连环处理,这回明白了吧,各位这回知不知道人家为什么给咱们这个dispatch了。
15:54
不一定用,但是人家事情得做到位是吧,那这三个各位咋的,那咱们没学呢是吧?哎在这儿先不考虑,那这个呢,咱说说吧,为啥把state给我呀,因为有些时候你得根据目前的数据去做判断,同学一句话,如果不把state给你,我就问你吧,你这判断你怎么写,你怎么拿到当前是奇数还是偶数,人家得给你吗?那怎么给你啊,当然就想好了,把这state给你了,哎所以说同学你感觉感觉这个上下文他考虑到了所有你可能需要的东西,然后呢,哎,都给你了,OK,好,回来同学我把这个DEMO1和DEMO2啊,我给它删掉,这只是为了说明一下问题,那这样撤回来,我把这个逻辑给它粘出来,然后DEMO1DEMO2给它删掉,然后这儿呢,删掉删掉,在这儿正常写这个基数加就行了,然后在这呢,还有一个问题啊,各位有一些同学啊,可能有这想法,诶说了老师啊,我有一个不成熟的小建议,就是说你看啊,老师我在这个位置啊,已经拿到这个contest了,来我给你点一下啊基数加啊。
16:54
掉价。老师,我都拿到state,那我就可以操作了呀,对吧,老师你看你这sum不是零吗?那我现在不就是想加吗?那我直接加就得了呀。
17:04
哎,来写写同学是这意思,老师什么commit,让它边去context,第2STATE there some加等于VALUE6老师写完了,哎,人振写没啥毛病吧,各位不就想把这sum给它加一下吗?那我在这儿都已经拿到它了,我直接加就得了呗,啊,为啥还费这劲啊啊,拿到了这个萨姆完我不加,哎,我还得调commit大写的,加完我再加。有些同学难免有这种想法,我跟你讲哦,各位,人家这么写啊,代码还奏效呢,功能能实现,你瞧效果啊,刷新一波,这回我就得给他制造一个基数了,要不逻辑他走不下去对不对?好同学是不是一一是基数是吧,来走。你看。是不,各位就一种感觉,同学好像我这么写到这,大家觉得完了老师mutations瞬间就不香了,那你看看我在这个action里面已经能拿到state,我直接操作就可以了呀,但是同学你最好不要这样做啊,为啥呢?你这样做的后果就是开发者工具失效了,看图说话,各位开发者工具一直跟谁在对话呀,Mutation,所以说同学你要把这玩意儿整没了,那你自己看效果吧,来回到这个view X啊,开发者工具我刷新一波啊,各位base data是零对吗?好,我正常点个加啊,这肯定能捕获到对吧,我正常点加嘛,他肯定走了那个mutation,然后主要是这各位你看着啊。
18:26
加是不是变成二了,同学你看点这点这你点哪他都捕获不到,你这次加了,你说对吗?各位也就说你这么写开发者工具你直接就给废掉了啊,所以说有的时候吧,各位咱得这么说,不按照标准也能把代码写下去,你就属于乱拳打死老师傅这种感觉啊,但如果你按照标准去写的同学,他有这些东西能介入,能辅助你,然后还有最后一个问题,哎,就是可能有的时候啊,大家会产生这个疑惑啊,来,我把这个删掉啊,只是为了掩饰问题,还原成正常的写法,还有一个地方啊,大家可能也会疑惑说老师啊。
19:00
我觉得截止到目前啊,你就是为了给我讲课刻意写的什么啊,基数加完了,等一等再加完了呢,刻意呢,就把这些业务逻辑就往这action里边写,对吧,你跟我讲的action里边可以写业务逻辑,完了呢,你就把这业务逻辑啊,就真往这写说老师其实我觉得这个挺牵强啊,有些同学说老师让我写呀,嘿,你瞧着住掉判断呀,我不在这儿判断,哎,这定时器呀,嘿,我也不在这包裹,老师我就觉得,那你说组件都在这了,那业务逻辑我就直接写在这多好啊,老师咱就拿这个加来说,我不用写这句话,老师我自己判断对不,一点按钮就判断,很简单,This点老师Dollar符到点state,老师点sum除二取于判断一下啊,然后老师如果符合要求,我就正常加就得了呗,复制老师你看判断逻辑我自己写是不?哎还有同学说老师那还有这就比如说呢,我想这个等一等在加是吧,那这句话我不删,给它注掉,老师我可以这么写呀,业务逻辑写在自身嘛,Set time out嘛,然后我等。
20:00
那个500毫秒嘛,然后如果500毫秒到点了,我就正常说我要加,这不就得了吗?老师你看这多好啊,然后回到你这边,你这action啊,咋的,歇歇吧,你这action呢,歇歇吧,老师你看我觉得整个action好像都不用写,是老师你说过啊,这里边能写业务逻辑,但是老师我就觉得业务逻辑可以不往这里边写,我就觉得你说的很牵强,业务逻辑写在这多清晰啊,别人一看组件就明白了啊,这是基数在加啊,这是等一等,老师我功能还能实现的,你瞧效果啊,正常加没问题,减没问题,基数在加没问题,等一等在加没问题,老师凭啥非得把逻辑写在action里啊,你看人这么说是不是?哎,同学也值得咱思考啊。哎,说一下同学为什么有的时候要把逻辑写在这里边啊,同学你想一下现在呀,你这个逻辑很简单,你就是除二取于判断一下奇偶数就得了。同学,你这么想,如果本次我执行的动作不是加,而是发票的报销,我传递的不是一个简单的123,而是一个发票号,同学,也就说这不是加,是apply支付或者报。
21:00
销,然后在这儿呢,我传递的其实呢是一个发票的号码,各位,那我问你这就不是判断基偶数这么简单了,首先联系一台服务器验证发票号的真伪,对吧?啊,然后呢,可能说再联系另外一台服务器判断发票的类型,再联系第三台服务器,看看这个发票是不是什么,哪个城市哪个公司所开的,也就是说你有一套非常非常复杂的发票真伪的判断逻辑,同学,难不成所有人在报销的时候,自己都得写一堆判断吗?自己都得发那一堆请求去联系服务器验证发票的真伪吗?同学,你不觉得这样的话代码冗余量很高吗?不觉得这样写没有复用吗?所以说同学,如果你要这么写,问题就解决了呀,你看着在这儿我就弱弱的说一句,我要报销啊,然后呢,传递你应该传递的那个发票号,我是不是传完了,OK同学,剩下的事不用我管了,来到action这他自己就去处理了啊,所有人只要涉及到发票报销,各位是不是都走这action就得了。我代码执。
22:00
写了一次是不?各位,哎,业务逻辑一复杂就体现出action的作用了,对不?各位好了,撤回来啊,那这呢,把这些给它删掉,也正常写加ODD加wait啊,简单点说就是加ODD里面啊,这个action里面可能业务逻辑非常复杂,这个加也有可能非常复杂,哎回到这儿,那我把他们两个呢都给它正常的解开啊,就是说了几个大家可能会产生疑问的小地方是不?哎这回说一下大家是不是能觉得稍微好一点是吧?哎,好了,那这一小节呢,我们停停之前各位来回来,我已经把笔记呢给你整理好了啊,搭建环境这块之前咱看过了,现在是基本使用啊同学,我只给你写了一个action加,给你写了一个mutations加啊,以及后边的这些东西是吧?我没有给你写的那么完整,因为完整的东西在代码里呢,笔记精简点就好啊啊,这组件中读取views的数据来,同学咋读来着?Dollar for store.state.some至于说前边加不加this,看你自己,如果你在模板里面写,不用加this,如果。
23:00
你在GS那个脚本里面写,你应该加this对吧?各位啊,还有就是同学去修改数据的时候,你组件里面可以dispatch去走action,也可以直接commit去联系mutation,对不对?哎,所以说在这你看如果没有网络请求或其他业务逻辑组件中也可以越过action,既不写this page直接写commit,好,那这小节呢,我们听。
我来说两句