00:00
好嘞,各位,VIVO X的开发环境呢,搭建完了,那接下来呢,我们就把这个案例啊给它改成VIVO X版本的,那回到这个原理图里面,第一件事我们就得把原本保存在你这个组件里面的那个和那个SUM0,哎,就得放到VX里的state中了啊,不得交给人家保管吗?是这样啊各位你说我们用这个view X的目的是不是这样的,就是整体来说呢,是一个APP,然后这个绿色的组件啊,就是你的这个cont count求和组件,然后至少是不是还得有一个别的组件,比如说叫做DEMO,然后呢,你再把你那个求和的和啊去交给这个VX,比如说这个SUM0,然后这两个组件呢,都从里边去读取这个SUM0,同学,这是不是才叫共享啊,也就是说我只有存在两个组件,或者两个以上,我把东西放在这个viewx里面才是有意义的,是不,但我目前的效果呢,是这样,同学没有这个粉色的组件DEMO。
01:00
只有这一个绿色的,哎,就看起来可能就有点无聊啊,为什么说呢?因为正常来讲,这萨姆直接放在自身就可以了,但是在这儿呢,哎,我非得历经千辛万苦的把这萨姆交给这UX,然后呢在历经千辛万苦的再给他读出来,确实看起来有点无聊是吧?各位啊,是这样啊,这个组件写不写呢,必须得写,各位你说如果我不写第二个组件,我给你讲比X讲了个寂寞,还说张老师啊,给我讲一东西叫共享,诶张老师从头到尾呢只写了一个组件,同学,那谈什么共享呢?啊,得写,但不是现在,咱们现在呀,先把这条线给它跑通了,哎,就是count组件能从VX里面读,而且呢,Count组件还能通知view X改,你把count这学会了,那我问各位,你再写一个别的组件去读去写,那不是分分钟的事吗?哎,好了,回到代码里,第一件事,各位找到count组件,哎,把这个SUM0是不得给它带走了,不能写在这了,那写在哪?哎,找到view X,哎,然后找到哪state里。
02:00
面诶把数据配置进去对吧,一步一步来,好,写完之后同学不要觉得你直接剪切走就可以了啊,往上看模板中的这个sum咋的不能用了,因为我没有这个数据了啊,那怎么写呢?不知道,所以说我写问号,但是这些东西是不受影响的,你说对吧?各位啊,你这个V-model是吧,双向绑定啊,还有你的点击事件这些不受影响啊来再往下看,还有一个地方啊,也受影响了,哪呢?打开MYS,同学觉不觉得家里边没有办法再写这行代码了,因为你自身没有sum嘛,你确实有这个N收集到了用户所选择的那个数字,但是你没有sum呀,所以说这句话删掉,那同理这块。删掉,那这呢也得删掉,那这个if判断还咋判断呀,自身没有sum呀,所以说判断也删了去吧,啊那这里边儿呢,这个是不是得删掉,但是定时器没招你没惹你的,哎,所以说定时器呢,咱们放在这儿好吧,哎,那回到这个页面里面刷新一波,同学,现在就是只是一个空壳组件了啊,我选了二,选了三,我点加呀加呀,这些都没有效果了,对不对?嗯,那怎么办呀?来,回到图里,看图说话呗,Sum已经交给了state,请问接下来我得怎么做?诶,你得在组件当中去调用de PI,说明白你到底要加还是要减,加几减几对吗?各位好了,回到我的组件里面,同学,当你点击加的时候,哎,这些先都给它折叠起来啊,我们不考虑那个什么减什么基数加什么的,咱就说加各位怎么办?我是不是得掉thispach,但你能直接掉吗?不行,咱说这东西又不是window身上的,那是谁身上的呀?哎,Dollar符store身上的第二,那你能直接这么。
03:41
写吗?还是不能,为啥呀,因为这个Dollar for store是在VC身上的,刚才你不看见了吗?对吗?各位this.dollar for store.dispach来说话吧,说你要加还是要减?哎同学在这儿呢,你别挑我这词这事儿啊,我就直接写加加对,就这么low,哎,啊,因为大家能懂就行呗,加加嘛,加几我也不知道,加几我得看用户咋的,哎,选的是几是不是this.n呢,对吧?各位,哎,这回我们看看,也就是说同学我26行只要一写哪条线就走完了,是不是这条线?哎,好了,来咱试试啊,回到页面里面刷新一波,把这个清掉啊,我选择的是三啊,然后呢,321走,同学报错了,报什么错误呢?说一个不知道的action类型什么呀?加你知道为什么吗?哎同学,因为你在这确实dispach了一个加,但是可惜了这个action对象里面没有与之对应的那个K。
04:41
啊,是吧,各位,哎,那回到这里边,你知道得去哪写了,找到view X里面找到谁呀,ACTION4对吧?各位,哎,给他写一个G啊,加啊,然后它的值呢,是一个函数对吧?各位啊,那你想想这不是K吗?这不是Y6吗?啊来同学,只要你在这dispach了加,那这个肯定得调用,来我们测试一下conslo输出一句话叫做actions中的加被调用了啊来咱试试啊回到这边刷新一波,选一个二,这回点击加,诶是误被调用了啊回来那同学东西没有必要写的这么麻烦吧,非得形成key冒号value流的形式,不用各位方式删掉冒号删掉,这不简写形式吗?哎,那接下来呢,咱说说它能收到什么参数,对吧?各位你看图来说啊,你这有给了action,但是你别忘了,我们之前分析过,就是action里边这个加所对应的这个函数里边,哎,就这。
05:41
函数里边得调谁呀?得调commit啊,这commit在谁身上呢?哎,也是在这个store身上啊来咱看一下各位,他能收到参数的啊,是两个,我分别用A和B去接收,然后各位呢,也可以去猜一下啊,你说这两个应该是什么呢?逗号A逗号B,好了我们看一下啊各位回到页面里面刷新啊,清掉,我选择三,接下来呢,点击加走你各位这是谁?
06:09
这是那A,这是谁?这是那B,同学知道B是啥了吧,就是这边你所选择的那个加几的那个几,所以说回到这同学别用B了,哎,我用什么呢?Value对吧?值哎,那这A是什么呢?各位来咱打开看看啊,来我再选一个走啊这A打开,哎同学你发现啊,这A的身上啊有commit还有什么呢?Dispach哎同学这两个东西一般是谁身上有来着,死道对吧?哎,那这个时候有同学说老师那我知道了,他在这儿呢,就是把这个死道传给我了呗,同学你这说死道啊,可有点不太对,你知道为啥吗?来你看一下啊各位回来,现在我这输出的是不是那个A呀,就整个你所看到的这是那A吧,如果你说红色框里的东西是store,那可有点不太对,为啥说呢?同学,你打开VC,你找到store,同学你看看这个store身上有多少。
07:09
找东西是不是这么多呢?你看有commit,有dispatch,人家还有这么多东西呢,那你看你刚才输出的这个对象啊,它本质是一个对象,你看这个身上同学也有commit dispatch,但你觉不觉得他的东西比到身上的东西少啊,啊说老师,那这个到底是个什么东西呢?哎,你可以这么理解啊,它这儿呢,不写store,你可以这么写,各位啊,叫做迷你store,啥意思,一个迷你版的store。哎,想想迷你版的死道跟死道身上的东西差不多,但是没有死道全是不啊,然后官方文档里各位,它不叫迷你store,官方文档里啊,用的是这个词context同学,Context这个东西什么意思呀?来有道呢,咱查一下啊,其实它的含义呢,叫做上下文是吧?来咱看一下啊上下文同学,上下文什么意思?
08:02
啊,我们在做这个阅读理解的时候是吧?诶,原来上学的时候老师说,诶,你得分析这句话的上下文啊,然后再琢磨一下这句话什么意思,就比如说同学你考试打了100分,哎,我说你可真厉害呀,同学,那我这句话肯定是表扬你,对吧?你要打了一分,我说你可真厉害。同学,那你看这好像不是一个表扬的话吧,所以说context他就有上下文的意思,说老师那这上下文在这是啥意思呢?同学,看图说话呀,你说我目前已经来到了action里的加这个函数对不对?那在这个函数里面,同学正常来讲,你是不是得调这个commit让他走下去啊,也就是说此时此刻你是不是需要一个commit,哎,那他就给你了啊,但是没有直接给你啊,没有直接说来一个commit,然后让你去调用,他把这个commit呢给你放在一个上下文里了,也就有种感觉,他往上看一看,往下看一看,觉得此时此刻你好像需要一些东西,那就这样吧,我把你所有可能需要的东西都给你包成一个。
09:02
对象,然后我给你,那这个对象呢,就叫做上下文对象是吧?那当然这个上下文对象里面对于我们来说最想用的其实就是谁呀,Commit,那那其实刚才你也看到了同学他身上不仅仅有commit,还有dispatch,来写一下吧,各位接下来怎么办呀?Context给他拿过来走context.commit提交,然后说说的干嘛呢?加还是减呗,在这儿字符串加啊,那加几呢?我得看用户说的是几,说的是Y6,那就加这个Y6呗,好OK啊,这回呢,我们看一看啊,回到这边刷新一波,清掉,我选择一个三,点击加,哎呀,同学有问题说A没有定义是吧?啊,那肯定是我这犯错了,来这里改一下啊,这不能是A了,这是contexttest这句话注掉吧,是吧,各位回到这边刷新一波,选择一个三点即加。哎,同学又报错了,他说什么呢?一个不知道的mutation类型,什么加,刚才报的错误是什么?一个不知道的action类型,这回怎么是mutation类型的呢?很简单呀,各位之前我们看图的时候说了,如果你在这边commit的是加啊,然后你带了个二,那就得保证这个里面真的有一个加这个方法对不对?那你mutations里有吗没有,那回到这是不是接着给它补一个就行了呀啊然后呢,跟大家说一下,一般在开发的过程当中啊,我们编写这块的时候啊,是有一个小技巧的,哎,就是这个家别在小写了,给它变成大写的,说老师我不改行不行,同学不改当然行啊,你就写一个小写的,没有人去拦你的对不?哎,那你在这就正常配置呗,加,然后他也是一个啥函数,对吧,但是一般来说我们给他写成大写是因为什么呢?做个区分,就是一看到有大写的giiaa,明白了肯定是mutations里的对吧,那小写的肯定是actionations里的啊说老师为什么mutations里的就大写呢?
10:54
因为mutation很厉害,因为mutation能直接的帮你操作这个sum OK,哎,那所以说接下来同学把这块也得改成大写的是不?哎,那接下来在这的同学我再来一个consolo,这回输出什么呢?哎,把这个东西啊给它拿过来走,叫做mutations中的什么呢?这个加,并且这个是大写的加被调用了,那能收到什么参数呢?各位你瞧瞧吧,用aub接收一下这块呢,AB好了,瞧一下效果啊,回到这边刷新一波清掉,选择三走你各位你看mutations中的大写的加呀,被调用了,然后这块是三,哎,你说它是什么呢?
11:34
哎,这种形式哈,好像是个对象,打开同学里边有一个sum,正如你所见,输出的这个A呀,其实它就是那个state,哎,说老师不对不对不对,我那state是这样的,直接写了个SUM0,他这state呀,不对了,他咋弄成这种形式了呢?这会还有什么get?那你说为什么吧,各位,他监测数据改变的原理和view是一样的,因为是一个团队的出品,对不对?哎,也就是说你写的data人家进行了一番处理,变成了下划线data,那你在view X里面所配置的state,人家也经过了一番处理啊,当然不叫下划线state了,还叫state,只不过把里边的东西都匹配上了get set目的只有一个,就是为了监测数据的变化,对吧?各位啊,你就拿它直接当对象用,一点毛病都没有。所以说接下来你知道怎么写了,在这个位置各位别叫Alan,叫state,在位置别叫B了,叫value是吧,在这儿呢,也给它改一下,那这呢就是state,当然这句话呢,其实我不需要了,里边直接操作就。
12:34
得了,同学state点什么的sum,然后怎么办呀?加等于几呢?这个Y6这不就得了吗?啊,OK,各位说老师这回就写下去了,是的,来你瞧瞧吧,回到这边刷新啊,别的我没写,我只写的是这个加啊来,回到这儿选择三走,至少他没报错是吧?嗯,舒老师,那页面没效果呀,可是呢,那来咱写写吧,回来页面上别让他再展示那个问号了,把这块呢给它删掉。嗯,差之于法,这回写啥呀?想办法读取到state里的萨,对不对?那我得怎么读啊?来各位先把这呢给它删掉,你这里面不是写了一个mount的吗?反正你得顺着这个VC出发呀,你说对吧?各位,你这里边读取什么不都得顺着VC出发吗?你模板里边用到的任何一个东西是不都得是VC身上存在的呀?哎,好,那我们看一下啊,顺着VC出发,怎么能拿到那个萨呢?肯定得找到了,夫道。
13:28
然后往哪找呢?各位,有这么一个东西,往下看state啊,this.dollar死到点state,然后打开它是一个对象,再往下看,是不是有三,这回不就拿得到了吗?哎,回到这边,知道怎么写了吧,当前求和为冒号差值语法,哎,然后写上到了福道,哎,说老师你丢了这个this同学,我应该这么写吗?this.dollar福,不会吧,同学,模板里面直接写Dollar福,Store是不就行,模板里面能看见VC身上的所有东西,第2STATE,第2SOME,这不就得了吗?
14:03
啊,回到这儿刷新一波,一上来是零,为什么呀,因为你这边配置的初始值是零,对不?你把这块改成98,那回来看它就是98对吧,回来这会儿改成正常的零好了,回来刷新一波,同学我点加了啊走你没问题吧,哎,我这选择2OK3呢,肯定也是可以的,捋顺一下这个逻辑对吧?各位我把这两个输出呢,再给你解开,一个是这儿,一个是这儿啊然后后边这东西呢,我就不输出了,大家都知道是什么了,把这个呢也给它删掉,好保存,回头看一下效果,你每一次点击加的时候,同学actions,先走mutations,再走同学图里边的这个流程,我问你是不是写完了,哎,走actions,走mutations,然后呢MU修改state,然后最终呢,重新渲染页面,是不是看到了最新的结果,OK,那加你能写下去,各位回到这儿,你说你也能写什么呢?肯定能写减对吧?来,那咱写写吧,各位啊,那怎么办?往下滑,把这一堆东西给它复制一份,当你写减的时候,那这呢。
15:04
就变成减减啊,我就先这么搂啊,以后我再改啊减,然后同学就得保证怎么着,首先action里边得有减啊,这块补一个小逗号,这是减啊,然后这呢减被调用了,然后这呢大写的减对不好,那划到这的同学把这个再复制一份小逗号给它补一下啊,那这块呢叫做减诶然后这块呢,给它改一下叫做减,然后在这儿呢简等呗,是吧,你先不用去考虑优化的事,咱先在这写着对吧?各位啊,那减就写完了啊来我们看一下效果啊,刷新一波能加了啊清掉这回呢能减了是不?各位哎,那剩下的逻辑啊就简单了,来回来各位回到这个组件里面,我想基数在加,那怎么办?判断一下,如果是基数,那怎么的加怎么加呀,Thispach一个加,这不就加了吗?啊,那怎么判断呀?很简单呢,this.dollar for到点state.sum除二取余对不?各位,那定时就更简单。
16:04
完了给它复制一份,完事了呗,都搞定了呗,啊回到这边呢,刷新一波看效果啊这块呢是二,然后加对吧,然后呢,减是不是也可以哎,清掉这那我奇数再加,现在偶数肯定不行,调成奇数30奇数走是不是能加这就加不了了,等一等再加是不是也行,哎,那咱们这样各位稍微呀,完善那么一点点儿,就是说这个判断呀,我不想放在这儿。啊,这个定时器呀,我也不想写在这儿,哎,就有这么一个感觉,各位就是在这儿啊,我虽然想基数在家,但是不想自己判断,哎,我写这么一个东西叫做加OD,啥意思?奇数在加啊,那在这呢,我把这个给它拿出去,定时器我也不想在这写,哎,我写一个加wait wait什么意思呢?等待说老师,那你这不写判断了,你这不包定时器了,那你这个判断和定时器写在哪儿啊?哎,各位听我说,我想写在action里面,咱们看图说话,同学,Action不就是那个迎宾吗?不就是那个服务员吗?是吧?啊,咱说如果你有点业务逻辑,如果你想发送adjust请求,是不是可以把逻辑和发送请求的代码写在action这啊,那我就刻意的给你制造了两个有业务逻辑的地方啊,一个是基数在加,一个是等一等再加,OK啊说老师那这回好像就行吧,这回好像不行,来你刷新一下同学目前的代码,肯定是不行,当你点击基数在加的时候,他说一个不知道的。
17:29
这型加ODD你知道应该怎么做了,回到这个里面,各位有加有减,还得给这个复制一波,然后在这来个粘贴小逗号补上,这叫加ODD是不也有context,也有value,那这会呢,给它复制一下叫做加ODD,然后呢,被调用了里边这怎么办?各位别一上来就肯定是不行的,你是不是得写一个判断啊,判断什么呢?如果然后怎么的,我在这个加呢,那你就得拿到当前的值,哎呀老师完了,那我拿不到呀,你能来各位把这判断给它注掉,你看这是不是有个上下文呢?同学你就这么理解啊,这个上下文啊特别给力,就你在这写东西的时候啊,你发现你需要一个东西,诶你就去上下文里找它就有啊,那在这呢,我给你输出这个上下文,你瞧好了,各位刷新一波清掉选择一个三,然后点击基数,在家同学输出的这个是不是那个上下文呢?那你打开上下文是不是有state呀,是不是有sum呀,这回不就能判断了吗?对吧,各位来在这儿给它写下去,走这块呢给它删掉。
18:29
怎么写啊,如果上下文里的sp.sum除二取余啊,它不等于零,好,那就走下去对吧?哎,那同理各位,这块有加OD,那这块是不是就对应加,嗯,那同学你说这里面还用再多写吗?这里不用了,各位你到了mutations这个里面就不要写任何的业务逻辑了,也不要去发送adjust请求,说老师这我怎么理解?同学,咱之前是不是这么说的,他是那个迎宾。哎,或者服务员,那他是谁呢?是不是,那后厨,各位你想想你有所有的要求,是不是可以跟服务员说,你比如说我这个要一份蛋炒饭啊,不要蛋也不要饭是吧?你可以跟他说这个需求,然后他转达给后厨,你说对不,同学到后厨这儿你就不能直接开开人家那后厨的门,然后说诶,谁做我那蛋炒饭呢,不放什么什么东西肯定是不行的,各位对不啊,有话提前说好,到这就已经真正的开始加工了,你说加我就义不容辞的加等,你说减我就直接减等对吧,别跟我提业务逻辑什么,这个时候你再加,那个时候你再减,然后问问谁加多少,问问谁减多少不行,各位业务逻辑如果想写都写在这儿,对不好,那就有这个加ODD了,这回不就实现了吗?来刷新一波啊,看效果走一是基数吧,所以说能加二就加不了了,对不啊,我知道这个action里的加ODD啊,一直都在被调用,但是同学他不敢commit下去是不?嗯,OK,那把那个东西再写一下呗,就这边的这个加wait,那把这些东西呢给它复制一份,然后名字呢给它。
19:57
改一下加wait,那这会就简单了,同学啊,不是判断了,直接包一个定时器就可以了,写一个set timeout,然后走写到这,然后等了是500毫秒,然后呢,我再执行真正的这个加是不就可以了,哎,OK,然后我写到这儿呢,可能就有一些同学说了,诶老师啊,那我觉得是这样,你这两个action啊写的没有意义,因为你看你这边拿到了这个家,你转手就commit了一个家,哎随就把这个东西给人家带过去了,那你这个迎宾这两个服务员他没有作用啊,啊,但是你这两个老师是有点儿作用的,因为这个迎宾呢,可以判断一下基偶数啊,那这个迎宾呢,可以让他等一会儿再加你这两个啊有存在的意义,但你这两个没有存在的意义啊,你看你写了个加减完,在这儿都是一样的,拿过来就转发对吧,每次都说哎,你好欢迎光临,你好欢迎光临,这很机械,所以说同学完全可以把他两个租掉。
20:54
哎,舒老师那住调接下来怎么办呢?啊,舒老师好像直接就行吧,肯定不行啊,各位你选择一个三,你点击加,你看不知道的H类型加,那怎么办呀,回来各位在组件里面咱们就不要在dispatch了啊,之前咱就说过,如果你觉得这个里面真没有什么业务逻辑,你可以直接在组件里边调谁commit,然后去联系谁mutation直接修改,所以说同学来把这个dispatch给它删掉,然后写谁。
21:21
Mutation不是个位,叫做commit是吧?哎,把这个拿过来啊,而且同学commit是跟谁对话呀?看图说话,来看图说话,Commit是跟mutation对话,Dispach是跟actions对话,既然你调的是commit,所以说你里边的那个名字啊,一定是大写的,你说对不好,回来各位走,那你说是怎么写,把这加变成大写的加啊,把这减呢,也得变成大写的减,这回不就得了吗?来刷新一波啊,各位加可以啊,减可以,你看完全越过了那个action给它清掉,这回呢,我点击基数再加可以的,那再点就不行了,然后等一等再加,对吧?哎,加ODD,哎,这会儿怎么回事儿,等一等再加,不应该有这个了啊来,回到这儿看一眼啊,在这儿呢,好像是我那个输出没改,应该是在这,各位这是加ODD,这是加wait对不?嗯,这会儿我没改,它不可能调错的,只要名字对应上了,它会精准的给你调用的,好回到这边呢,再看一下效果啊,来加没问题来。
22:21
没问题,奇数再加没问题,偶数加不了了,等一等再加,直接就是加A被调用是不?各位啊,那你看这两个都是有业逻辑的对不对,哎,那这个呢,是没有业务逻辑的,这不就写完了吗?对吧?哎,这是一个非常基本的使用啊各位一会儿呢,我们还会再完善的,OK啊,那这一小节呢,我们停。
我来说两句