00:00
大家好,我是学轩地的特约讲师高洛峰,上节课咱们学习了组合API中如何结合路由使用,因为我们在使用组合API中,我们所有的代码需要写在setup里边,而setup里边呢,咱们说了是没有这次的,对吧?没有这次,内部没有这次,那就没有办法通过这次来访问这两个全局属性。那不能访问全局属性,我们就需要通过VE router里边的给我们提供的两个API方法来获取和这个等价的属性,就可以操作路由了,比如说获取参数对吧,比如说跳转都可以做了。那我们也学习了导航首位。在官方手册里边我们也可以看到,在这里边可以看到,这里边专门有组合API给我们提供的这样的方法,那这节课呢,我们再来学习什么,学习Vue ex,因为同样的道理,在setup里边没有这次,没有这次呢,那就访问不了我们的状态,对吧?访问不了我们状态用原声的当然是可以了,那我们看一下VEX,在exx里边我们看一下,它也给我们提供了组合API相关的API。
01:06
为什么呢?他跟我们告诉我们也是一样的,在setup里边对吧,我们使用不了这个东西,因为setup里边没有这对吧,所以呢,我们就得调用这个API useqre给我们返回来一个,这个就可以在setup里边用了,是这样的一个原因,那我们快速的建一下这样的一个程序。给大家演示一下,先稍稍复习一下,我快速复习一下,呃,我们的状态管理,那首先呢,我们把状态管理也要写在一个单独的一个页面里边,那我们建一个模板,我们叫做简单一点吧,叫做VUX啊API。就叫这个名简单的一下,但是你看名字就知道了。这里是。啊,H1。H2型vex的auto。它这里面就这一个啊,所以在这里边放这个,那我们建完了这一天,我们需要在呃,路由这个里边我们加上一个。
02:06
加上一个,我们复制这个吧。不是。呃,可以在这块我们改成也叫做v exx API直接到这来,那我们这块加载的就是什么。VAPI,然后加载完之后,我们需要在菜单这块加上一个菜单项,加上一个菜单项,我们把这个。复制过来。复制一个。拿过来。就了,然后这块改成。VAPI这块我们随便起一个名字,上一节课是路由API,这里边我们叫v uex API。这块就多了一个VEXAPI,那咱们所有代码都写在这里就可以了,那我们看一下状态管理,我们有这里边几项状态,所有的状态我们写在这里边对不对?声明的状态我们在这里边,我们声明两个,比如说nu m1等于呃,等于几,等于幺幺吧,里边写一个逗号,然后NU2。
03:07
等于二二这样的证明两个变量,那我们这里边儿有这么几个状态管理的。这里边如果我们在模板里边直接用的话,直接用我们就可以通过,你看如果直接用N1的话,在模板里边我们可以在这块直接H3这边写上nu这块,然后我们用差值在这里边你用这次可以直接访问到,访问到这个全局属性,这个全局属性里边有个sta,也就是找到我们的这个sta对不对,然后我们访问到这里边的nu。这个变量,这样的话NU1的值是幺幺,就可以在任何模板里边都能够访问这个状态。是这样,然后呢,我们还可以比如说用计算属性在这里边计算属性,这里边我们可以加一个什么记忆对吧,计算属性,计算属性里边就跟我们平时写计算属性一样,比如说我们用这个数是一个double,对吧,那我们这里边写一个计算属性的一个方法,呃,我们叫做d double吧。
04:11
嗯,写随便写的一个这样的一个方法啊,在这里边我们返回什么S,因为这里边我们需要接收的是一个参数ST对吧,就是把我们相当于这个用我们存进来,那我们直接返回state里边的NU1我们乘以二就是double对吧,计算属性,那我们同样在这个位置,如果需要计算属性的话。我们这块写上get。的nu me计算属性的me,那我们通过它这块可以找到GT get里边有一个什么do这样的一个属性。我们看一下这块,呃,哪出错了。八一没有定义,诶,我们在这个里边get get s。你看22就有了,没错,我们少写了一个什么,少写了一个一个S啊,因为它是加S的,你看我们这个地方正好不有个S吗?所以正好别忘少写S,这样的话我们计算属性也可以用,那我们说了,如果我们修改值,修改值我们通常是在这里边是修改的唯一的一个途径,对不对,那我们Chang修改nu me这样的一个方法。
05:20
在这里边另一个修改,那这里边第一个参数state还是将我们这个怎么的,是不是传进来呀,对吧,然后第二个参数可以接收一个参数,我们指定的一个参数,比如说啊,它就类似于负载附件的对吧,那我们拿过来当我们传一个就传,传多个的话,我们用对象传,他只能用这个参数给我们传进来,这咱前面说过的这个也就不多说了,然后呢,我们将这里边的stte,将它里边的nu me,我们修改成修改成我们想要的。这个值修改成我们这个值就可以了,那调用这个方法我们怎么调用呢?我们需要在这里边,比如说我们点击的时候,它需要一个参数,那我们做一个按钮。
06:01
这块呃,BOT to这块修改怎样修改nu nu修改这个值,然后这个按钮,那我们这块把这个值再再加到这块来。再加到。这个地方。拿过来。修改这个,然后这里边加个什么,现在咱们还没用到这个东西,我先给你复习一下这个啊,怕你忘掉,那修改的时候调用这里边的方法,我们叫做呃,C nu me随便写的一个方法,对吧?在这里边修改这个,然后我们在这里边存一个参数,你可以,当然在这里边你可以任意存参数嘛,对不对,存一个,比如说它是一,我把修成修改成33,那我们这个方法我们需要在哪定义呢?需要在这里边定义。啊,Met hods,这是原来的这个方法,这里边声明一个方法c nu,零方法需要修改的一个新的数,Nu。Ne一个新的数对吧,然后在这里边我们调用,这里边调用我们就得使用Z点什么do s ture,因为在方在模板里边不用这次,这里边就得用这次找到这个全局属性,找到这个全局属性我们得在这个里边,我们这里边修改这边状态是唯一途径嘛,对吧,你当然你可以直接修改,但用这个可以用D,呃,POS可以去观察那个变化嘛,对吧,那在这里修改的时候,那我们就需要使用什么,我们就需要CUMMIT提交。
07:30
提交到哪呢?Me就是我们这里边定义的方法,到这里边来,那它当然自动会把这个给我们传进来,那我们只需要传第二参数就行了,第二参数就是ne e w um传过来,这样的话,我们在一点击按钮的时候,就会把这个值修改成我们传进来的这个33,对吧,它就用这个来,我们点击一下看可不可以修改,你看33大部分变了认成66了,对吧,这是这个方法,那我们这里边还有一个。当然模块这个他现在就不需要了,还有一个这个如果我们需要有后台请求的话。
08:04
如果需要有后台请求的话,我们调用的是这个方法。你看就是假如说请求API对吧,请求后台API,那我们需要调用这个方法,那调用这个方法,这个方法里边我们假如说有一个,嗯,再有修改五秒后或者几秒后,咱们去修改这个值,那我们这里边可以呃做一个,呃也做一个方法吧。呃,修改咱们是time通过时间,因为异步的嘛,异步的修改,呃C随便写的一个名,然后这里边呢,需要传递的就是什么,就是上下文。对吧稀,当然这里边儿咱们可以看使用。这里边是使用con,通过它我们就可以接收,比如说上下文呢,可以找到这个状态,然后呢,也可以干嘛呀,也可以通过这个方法里边去直接修改,当然是没问题的,当然了,我们最主要的是所有的再经过它去修改,那我们在这里边你看啊。
09:02
嗯,不这么接受,我这样接收两个,一个是呃C,呃,Co MIT,一个是我拿到这两个,然后在这里边我通过set太out,然后呢,调用一个方法。用一个方法。嗯,这里边先设置五秒,因为异步的嘛,对吧,五秒五秒钟干嘛呢?五秒钟去修改,那修改这个值,我重新也调用这个通过com MIT对吧?当然在这里边我们比如说你可以用XL啊去获取数据库啊,对不对,都是一样的,通过这个提交给谁呢?还是提交到这里边的Cha,嗯,G。呃,Nu提交到这块,让他找这个方法对不对,然后呢,我们传第二参数,比如刚才传33,我再传个44,这样的话,我们通过什么五秒钟之后去。
10:00
嗯,访的话,那我们在呃这个地方一步处理,我们再做一个。再做一个按钮。那我们这块呃修改加个A吧,CME对吧,那我们在这块是呃不存参数了,因为那里边是固定去存的嘛,直接调用就行,Nume修改我这边写个A,就是通过action去修改的,对不对?然后呢,我们复制一下这个方法里边我们再加一个呃,Can me不需要参数对吧?那这个时候我们调用的时候就不是通过什么。不是通过调用action里的方法,不是通过commit,而是通过什么dispatch Dis path dispatch提交到哪呢?提交的时候他会给我们提交到这个方法名。提交到这个方面。来,我们把这块拿过来。但是你也可以存参数,你看修改,现在我点这个修改,默认现在是一刷新的是幺幺对不对,点击修改等待五秒钟,54321直接是能写太长了,你看四十四八十八是不是全变了对吧?异步处理去修改的,这样去调用它,调用到它这里边,然后呢,异步处理,异步处理之后再通过。
11:13
再通过它我们再去修改,那基本上我们在页面里边操作就这么几个步骤,这是原生的一个操作,对不对,当然这细节咱们前面讲过VS啊,这个模块划分我就这里边用不上就不用了。那你看同样的程序,同样的程序,那我能不能用什么呢?用咱们setup,也就是组合以PI去改写呢,当然我这里边只改一个值啊,你可以把这个值你再写一遍啊,就原生的和原来的你可以对比啊,那比如说这里边再写一遍double这里边,那我们这块全改成什么。改成八包。二。然后呢,这块我们改成状态二的double,让你对比一下,就是所有我们的调用的时候都调用DOUBLE2,然后这里边改变的时候。我们所有的都用它改变N2的值,这块改成N2。
12:02
这里面,然后安神,这里边我也做两个方法。这里边儿改成二,然后这里边儿我也把它改成二。嗯,这里边儿就随便变一个吧,55。呃,这里边儿啊。这个还是。这个变成。55随便写几个值啊?你看我现在这里边写法跟原来是没有任何变化的,只不过我这个是修改第二个值,第二个状态对吧,原来是第一个状态复制了一份而已,那这个时候咱们在这个里边就可以用在setup里边同样做这些事情了。比如说。我现在想在这个setup里边用到这些东西,我得怎么办呢?逗号加逗号,那首先。我需要在这里边的任何方法,比如说我做一个这个方法和这个方法这两个方法的时候,那我们就需要用到什么。过去它对不对,那我们就需要从这个里边port引入,引入谁呢使用。
13:05
这个,然后from从哪里边呢?从VX得从这里边获取啊,它是VX里边的,要注意那既然通过这里获取,那我们cost cont,我们就可以生明一个变量,S等于通过什么,通过us这个方法里边什么参数都不用传就能够获取到这个。对象,那这个对象里边一样可以有这些,比如说我们想获取属性值,那你为了保证这个属性值可以,呃,展示的话,我们最好在这里边用计算属性,然后呢,我们所有的值想在页面访问的话,那我们是不是得加一个return呢?Tu return返回一个对象对吧?那直接在反应对象里边,我直接用计算属性就返回A2的值,那我在这个地方再加上。HR换银行?这样的话,我们这块这一行下边是通过这个去访问的,那这里边你看啊,用计算属性C啊,看Co啊,得先我们先返回确定两个值,比如说NU2。
14:06
确定这个值A用M2打过去,然后com qd,通过这个方法,通过这个方法它的计算属性嘛,里边我们需要传一个回调对吧,在回调里边。再回到里边,那我们直接就可以用到s tore计算属性嘛,这样的我能保证这个小公式啊,用这个计算属性,不然的话还得用ref啊,什么设置点V度这个值也麻烦,那你看直接就可以用到它,用到它这里边的。访问NU2。就可以这样,当然了,直接这个返回值的话,我们可以什么可以不用这个大括号,不然里边我们还得写个对吧,用计算属性,你看通过这里访问,用这个的目的直接返回呢,它直接就是显示式的了,所以呢,我们在这块。访问一下,用H3访问一下NU2的值,那我们这会用差值变成什么,这回就不用,当然我们通过这种方式一样的获取,但我想获取这里边给我们返回来的二,对不对,那我们直接NU2就可以了,你看。
15:05
诶,看一下哪有错误。计算属性,我们如果用计算属性的话,我们自己怎么办呢?我们是不是得。引入通过什么cupp啊,TED引入,然后这个在哪块,在VE里边的引入的对不对。更新一下。那A2是不是就有了,这里边我们能获取到这个里边的值,那假如说我想获取它的计算属性,也就是计算属性get里边的G里边呢,我是不是也复制了一份叫做DOUBLE2,对吧,DOUBLE2,那我在这块在return,因为它是监测格式do。嗯,B1DOUBLE2里边写一个,然后也用计算属性,当然了,本身该就是计算属性,但是不是这里边的计算属标,不是赛纳的计算属性对吧。那然后呢,我们这里边存一个回调。这里边不能是这个,因为返回的那是一个对象的格式,然后我们返回什么呢?T里边的sta,这不是应该是get get里边的有一个什么。
16:08
看一下有一个。嗯,八二。Do。DOUBLE2这样的一个一个方法,看一下方法名是谁一起的。大复制一下保险。这个应该是一样的,没问题,然后呢,我们在页面里边使用这个计算属性,计算属性H3,这里边是get。G,然后呢,Double,嗯,Double。也是NU2的吧,NU2的因为前面加上get了对吧,加上get了,然后这里边值我们写上不是do。二因为也是计算属性返回去的嘛。你看44对吧,这个值原来值出值值22,它的851倍嘛,对吧,是44就可以了,那如果我们在这里边去修改值,使用MU里边的那个方法去修改,因为那是唯一的途径,对边那我这块再做一个,再做一个按钮。
17:08
Bo,你看这里边写上修改NU2,然后我这块加上NU2,把这二放在这块来,然后加上一个。啊CK click点击点击方法,我们这块叫做修改c nu2这样的一个方法,那这个方法在哪呢?对吧,那我们是不是也可以在setup里面去写啊。也可以在这里边写,直接返回一个呃,方法名返回一个我们想要的。这个方法直接在这里边就行了,但是你可以在这里边声明,声明完之后再返回也是一样的,你两种方法都行,你声明的话,你不也得放在这里返回吗?那我直接写在里边,把这方法里边写在这里边也是可以的,对吧,我们叫它c nu2。这个方法,然后我们调用这个方法,我们让它等,它对应的是一个,嗯,咱们进能阶断函数吧,阶段函数在这里边我们直接调用什么呢?调用使用s to,调用里边的Co MIT。
18:12
传递,当然这块我们需要,假如说我们需要传一个值,传一个。呃,33吧,随便写一个,那这里边是不是就得接受一个new新的ne nu新的值,那我们这块提交给谁呢?提交给我们这里边了。这个方法。啊,提交给我们这里边这个方法,然后呢,我们把这个参数也传进来W。跟原来的写法都是一样的,对吧,用只不过这块我们直接把这个函数对吧,在这里边你看直接就返回去了,因为它这里边也是一个对象格式嘛,直接这么去返回就可以了。我们看一下有个修改对吧,现在值是22,我点击修改,你看33,这个值本身也变成33了,就修改了,也是通过它去调用的,用法跟原来一样,只不过我们获取对象的方式是通过这个API获取的,那同样那我们再来一个。
19:02
还有一个修改,呃,通过怎么修改啊,通过这个CA对吧,Action里边对吧,有一步处理的五秒钟之后去修改的对不对,那我这块呃修改。N就是am,然后这块我们放的还是 Nm2,这没关系,只不过这方法没有换了,换成什么C2,那我们在这块是不是就得再来一个。方法就是c nu2这样的方法,但这个里边我们用这面函数去做,你没有参数你就可以不接收,对不对,然后我们在这里边使用里边通过。这个对吧,我们才能提交到谁呀,提交到这个里边。Action里边应用分发的方式,我们找到这个,然后在这个里边,我们再通过这个方法对吧,去修改,我们传递的是55,那五秒钟我们传递的是不是55呢?在。这个里面。
20:03
就可以了,然后保存一下,你看修改。321。无聊啊。你看五秒变过来,55这块大部变成这个,这个值全变了,也是相式的就可以了,这就是我们呃,这个的用法,当然了,我们手册里边。也给我们写的比较详细了,你看引入怎么用对吧,然后呢,在计算属性里边用对吧,在计算属里边用,通过这个去引用,可以更好的有响应式。然后呢,访问这个方法。对吧,都是一样的,只不过咱们我做的例子是跟手车差不多的。那你也可以呃,造手势的再做一下就可以了,这样的话,我们所有的状态管理的,有了这个属性,我们在这里边都可以去使用。好,谢谢大家,这节课我们就讲到这里,那到这里边呢,咱们基本上组合API的内容也就讲完了,那不光组合API的内容讲完了,咱们跟VE相关的新版的技术也都讲完了。好,这节课我们总结一下。
我来说两句