00:00
大家好,我是学习园地的特约讲师高若梦,上节课咱们看了get呢,就类似于我们在模板中使用的计算属性,其实是一个意思,只不过get的计算属性是计算我们VX里边的状态的,对吧?当我们这个状态的值需要经过一系列变化显示在页面当中的时候,那我们就可以用get,那get和页面单独的一个计算属性的区别,就是我们get可以在所有的模板里边都可以用到什么VS里边的state里边的属性,这个那它的用法呢,也比较简单,和这个呢几乎是和计算属性用法几乎是一样的啊。嗯,知道它什么时候用,使用的意义,那我们就知道在开发的时候怎么使用它那五大核心特性,那我们get就完了,Mutations就完了,那我们再看一下actions actions是干嘛的。它呢,就是我们管理状态其中的一个环节,你比如说我们在这个里边,你看我们这个是我们的状态,对吧,我们说了直接通过VE这个在模板里边改变状态,这样的情况,我们说是不会去这么做的,对吧,当然可以,因为这么直接去修改状态,我们不能用,嗯,观察不到它的结果,对吧,有的时候处理不好,所以呢,我们想观察状态,唯一的一个修改状态的一定通过什么,在模板里边通过这个mutations,然后来修改它是这样的一个过程。
01:18
那actions又是一个什么环节呢?它是如果我们有请求后台,你看back不是后台,Back不是后台的意思吗?后台API,假如说我们请求商品对吧,得通过接口去请求,那么我们就请求后台,那请求后台的动作就得在APP里做,那有的说我直接在纽推里做可不可以呀,也可以在这里边异务请求也不是不行,但是这里边请求请求的数据和处理数据之后呢,它不是响应式的,听懂吧,不是响应式的,所以呢,咱们按照官方给我们提供这样的环节,如果有请求后台数据的环节。我们就得通过action。那都什么样的数据需要从后台请求呢?也就是我们在状态管理里边,你看比如说。我们登录信息的ton,对吧?我们得通过嗯,Action到后台接口里边对吧?去查找验证用名密码正确之后把ton给我们返回,对吧?然后我们再通过mutations把它写到这个状态里边去。
02:14
对吧?那添加购物车我们想在数据库里添加,那我们也得通过添加购物车的时候,并不是直接把购物车写在状态里边用UG加,而是我们先通过action在数据库里添加,添加成功了之后,对吧,我们再通过有attention原子在状态里边,再将我们这个状态的购物车的数据也改一下,是这样的一个过程,那删除购物车也是这样的一个过程,那比如添加收藏啊,或者什么都需要跟后端通信,对吧?也就是我们状态里边保存的值,有一些是不需要跟后台通信的,那我们直接走可以团结。需要做后台通信的,就得经过action我们来处理。那咱们来看一下这个action怎么写的。我们还是找到我们的,呃,这里面你看在这里边有这么多环节,有get这个环节咱们用过了,对吧?有mutation这个环节我们用过了,那这里边是不是有还有action一个环节啊,对吧,这还有购物车吧,对吧?那在这里边我们定义一个,呃,方法跟我们mutations里边定义的都差不多。
03:11
比如这里边啊,我们做一个比如说获取套吧,假如说一个这样的一个,或者是我就随便起个名吧,也叫DEMO吧。你现在也不知道叫什么名好,当然了,得是根据实际应用,你实际应用做什么再取什么,那具体这些串在一起来合作应用的话,咱们只能在项目里边去用,这里边儿呢,咱们就讲它的语法,你把它语法掌握了就行,比如DEMO,那我们在。这里边在做一个方法的时候,你看当然这里边可以做多个方法,这都无所谓的啊,比如说。多个方法都是没问题的,你看跟我们这个里边和这个里边是不是写法都一样,但是我们mutations里边。传递的参数你看啊。传递的参数,这个不是这是里边啊,你把这收起来。Mutations里边我们传递的参数是状态,看到了吧,那。
04:03
如果需要多个参数的话,第二参数我们一般什么用,这个类似于携带对吧,携带数据也就相当于我们附件过来,然后通过附件,附件里边我们去访问里边的每个东西。看到了吧,通过这个里边的这个值是这样可以的,这是这两个参数,那我们在get里边第一个参数。第一个参数什么呢。也是这个计算属性,那如果其他的参数我们用什么,我们用这种里边再返回一个方法的方式,相当于呃,回调方法这样的方式,我们去接收其他参数,那。我们在action里边写的方法里边需要接收的参数是什么呢?你看咱们先来写第一个参数,它当然也是有多个参数的,那先是第一个参数是什么呢?它不是ST,不是这个。它是包含这个,它这里边叫做student什么呢?上下文的意思,上下文的意思,我们看一下手势。
05:01
你看它这里边给我们传的是希TST上下文的意思,它呢是一个对象,这个对象里边你看看这个图你就明白了,这个对象它相当于是一个中间的环节,先别管他异步怎么请求服务器,咱们用阿西奥啊,对吧?结合promise那种方式啊去请求,或者用阿贾克斯啊,或者解块请求,这个无所谓,那是里边的流程的问题对吧?那先看它语法,那我们这块它既然上下文,它上边是什么,是组件对吧?能发它往下走,通过有提交对吧?到这个它数据并不是直接去改,它并不是直接改它到时改状态的唯一途径是经过mutations。所以呢,不通过它直接改这个数据,所以还是通过muts去修改,所以在这里边上下文,它往下里边有什么,有commit对吧,往上这里面对吧,上下文嘛,它这里边能获取到什么,能获取到状态的值,然后呢。还可以获取到get,只能说计算属性这些都是可以的。也就是我们在。
06:02
你看comment,它可以有提交,往下传到哪啊,传到那个呃,Mutations里边,里边还可以有状态,可以获取状态的值,还可以干嘛呀,还可以有get对吧,然后还可以,你看里面还可以有分发上面的对吧,这些都可以,当然还可以,咱们下节课讲的呃是呃models。还有这个,所以他这里边有多个数据,那如果我们这里边,假如说我们在请求这个数据的时候,那它这里边儿咱说唯一的途径是修改数据,是通过他修改对吧。所以我们在这里边先让它调那个,所以这里边处理完数据之后,比如说一步处理,我们就set time out set time out,我们这块来一个剪头函数,我们是比如说三秒钟去修改一下数据,我模拟一下衣服请求了,但是你可以用二下去呼器,对不对?在这里边我们假如说从服务器请求完了,处理完数据了,对不对,大概需要三秒钟时间处理完,处理完数据,我想改变状态的值并不是在这里边直接修改,当然了,你希T st.ste你看这里边也可以去修改,你看也可以去修改,这里边比如说我把nu。
07:10
这里边我给它等于一个九九。随便写一个内值,那在哪去调用这个方法呢?在哪去调用方action,在哪去调用这个方法呢?你看一下。这块我现在没往下提交,先用直接用它这里边上下文嘛,它里边的这个状态这个参数并不是直接代表的状态,跟上面这两个是不一样的,对吧,那我先修改一下,你看可不可以这样又有什么一个不好的地方,你看我现在异步处理三秒钟。修改一下上面这个状态里边的对吧。那我在,呃。这个里边吧,这里边做一个按钮,这里边哪块打印上面是打印对不对,这块A这块做一个按钮。做一个Bo to对吧,A ion action这块,然后呢,我们这块加一个C,点击的时候调用一个修改C,呃,修改CN220自己随便定义的,然后我们在这个里边,这个模板里边未给我们加什么,为我们加。
08:14
这话。然后我们在这里边得导出这个,呃,模板的属性对吧,在这里边我们EXPT导出def alt。呃,导出一个对象。我们按照这个里边去写吧。导出一个。写也行,因为里边他默认没给我们记,还是我们删了。然后在这里边我们写个me ods,其他的数据不改,不改那里面的数据啊,然后在这边我们做一个方法是呃,Cn nu。这样的一个,呃,一个方法,你看我们在这里边做一个方法,这个方法也就是当我们点击的时候,当我们点击这个按钮的时候,会调用这个方法,这个方法里边你看我们现LG一下。
09:08
然一我们先看一下能不能调到。来到这儿。最小化,我们点到about关于,然后这块有action,你看一点击一号有了对不对,那在这里边呢,我们想办法调用到什么,调用到这个里边的这个DEMO的方法。当然这参数是默认传的,咱不用去传参数对吧,那我们在这里边就需要,如果我们调用。这点到如果调用什么,调用MU里边的方法,我们使用sum MIT这个提交的方法,这里边调用对不对调用。呃,在这个里边的。这里边儿的方法我们都使用提交的方式去调用,对吧。但是呢,现在这个里边方法,我们用的不是提交的方法,而是什么,而是你看我们这个图是不是有一个分发呀。将我们这里的事件分发到这dispatch dispach通过这个方法才能调用到action里边的方法,那比如说调用里边DEMO。
10:07
在这里边我们通过不是提交的方式了,而是什么,而是这个方法分发dispatch。Dispat ch,通过这个方法,你看BTCH啊也是一样的,跟我们那个题就一样,这里边有个DEMO。那我们一点击的时候,他就会到哪去,他就会到我们的。这个DEMO里边来,那DEMO里边我们就异步处理,模拟个异步处理对不对,改变一个状态,但是他说这不是唯一的途径改革对不对,他只是看一下它能不能返回到这个数据对不对,那现在。我们点击一下这个。你看是不是变成99了,那应该是三秒钟之后变。年纪。变得还挺快啊,300毫秒,我这边少写了个零。这个设计。这个。
11:01
连记123变,你看三秒钟相当异步处理去变了,对不对?证明这里边可以改变状态值,但是这不是唯一的方法,那唯一的方法怎么做,我们不在这修改,我们三秒之之后让他通过什么,让他调用这里边的。方法,你看这里边哪个方法是改变这个值呢?嗯,这个方法是这个方法是对不对,让它加一,你看调用ADB的方法,所以呢,在这里边我们可以。在这。因为修改状态的唯一途径是通过谁啊,是通过gun里边有个GMMIT通过这个提交给谁呢?提交到。这里边儿有个A的方法啊,这里边是不是有个ad的方法。ADB的方法,所以三秒钟通过ADD改变状态,Ad里边是不是又将这个值,这个是DNM啊,这里边有哪个是?那在这里边好像。那个。对吧,没有修改,那我再做一个方法吧,比如说里边是c nu这里边。
12:07
这是在有词里边写的方法对不对,我们这块加一个参数加一个呃,ST,这这是默认传的对不对,然后我们ST里边的nu,比如说等于99。通过它来修改,然后在这块我们调用里边的什么cn cn nu,你看这样去修改来,我们现在再点一下这个。ACTION321变,你看变成了99对吧,那通过这个修改,咱是唯一的途径是使用us里边那个修改,这样的话我们用,因为是经过这个的了,所以呢,用DV to啊这个DV那个工具开发工具,我们就可以观察到值的变化,如果没经过它的话,我们是看不到变化的。所以呢得经过它唯一图地修改,但是这个呢,我们现在装的最新版的VV3这个工具,嗯,6.6.00这个还是贝版还不支持,所以呢,现在很遗憾看不到这个状态变化,对吧,不然的话,这里可以在这里边你看一下状态的变化。
13:06
过来,这就是我们一个整体的一个提交的过程,那以后你所有有异不处理的,那都可以在这里边,那再回顾一下这个环节,也就是在我们使用调用的地方,我们通过什么,通过不是commit了通过它。是一个分发的方法,能调用到action里边的你定义的方法,那action定义方法呢,这里边是上下文,上下文的意思,那上下文里边你处理完之后想修改里边状态值,那我们里边有什么,我们里边有提交,当然这个方法我们可以这么去写,你看啊。Q,假如说这里边接收到一个Q,那经常我们会这么写TX表上下文对吧?T。然后呢,你看我们可不可以cont声明一个用结构赋值的方式,这里边声明一个sta sta和Co MIT,你看可以通过这个里边去获取cont ST。
14:02
直接这么获取,因为我们在这里边,我们获取的时候,你看获取的方法都是这样获取,对吧,直接把那个方法给我们吸附出来,那我们在这里边就直接有这个属性和这个方法了,对吧?那既然可以直接这么写,然在这里边可以直接这么写,那么我们在这块接收参数的时候,我们就可以怎么办呢?我们就可以直接用这个系构去接受ST,如果要这两个Co MIT,如果要get GS,那我们就接受这几个,这样看起来上下文嘛,就全接受了,不然都在这个对象里面。你看现在我接受了这么几个,从这里边,因为这个参数是自动传的,所以你不用存参数的这么传,那我们在这块。就不需要这样去改了,对吧,你看啊,我们就可以用什么,我们是con这块STT.nu我们改个九对吧,当然这九会一晃而过,然后我们用CMIT用它去真实的去改,对吧,那么C执行这个。
15:00
你看就变成这种方式了,来我们看一下。程序。年纪。321应该九十九九,当然没看到了,因为我们这块改过之后用下边的呃,T是不是又给修改了。质量,那我们在调用的时候,调用的时候,也就是在这个地方,在使用的时候,那我们能不能传参数呢?给他传过去参数也可以,你比如说我们传过去一个啊nu。C cont,对吧?等于88乘过去一个值乘一个,呃,Name等于。呃,VUX随便写的两个值,你看这个传过去了,那么同样在我们这里边跟MU是一样,我们在接收参数的时候,这里边第二个参数就可以是携带payload,相当于附件这样的一个意思,相当于附件。所以呢,我们通过这个,你看我们打印一下这块,你就知道,这里边知道pay.rog。
16:00
你打一下这个三秒钟打印对不对,来点击。321,你看这里边有88和这个直接是一个对象,所以呢,我想访问这里边的内点,N n m me,直接这么做就行了。所以呢,多个参数我们通过一个对象的方式传过来就可以了。啊,直接UEX这里面名称就取出来了,这是我们在提交的时候加参数,那如果这个里边,如果这里边假如说我们是做用二请求成功失败的时候对不对,如果我想把请求的成功结果返回到。返回到这个地方,假如说这里边我们去,呃是请求数据库,对吧,通过接口去请求用,如果请求成功的话,我们可以在这里边直接返回一个什么请求成功或者失败,直接返回一个promise。直接返回promise,那promise返回之后,那我们想在使用的地方过去这个是成功了还是失败了对不对,然后成功失败在页面展示,那么后边可以直接跳用什么去处理就可以了,当然了,我们这里边返回promise对吧?那咱们里边如果用X呢,直接返回阿,处理成功失败直接在里边返回就行了,那我们这里边就可以直接用这在这里边处理结果,将结果放到这个页面上就行了。
17:18
这是杰克阿肖。就可以了。那我们再看一下手册里边给我们提供的有哪些能没讲到啊,它的语法基本上就这么多,你看。这里边状态里边有个数,Mutations里边有一个对吧,在这里边action啊,Action里边对吧,你动作里边,当然它这没用异步处理,但是这个主要告诉我们是通过上下文这个里边的提交。执行这个方法对吧,不用做实验演示了。然后呢,可以通过这种方式解构赋值的方式干嘛呀,把我们commit从上下文里边取出来,直接这个提交,我也给你演示过了,那在应用的地方,在应用的地方可以使用这个对象里边分发的方式来执行啊里边的这个方法。
18:04
啊,然后这里边如果是异步处理的action里边方法,如果用异步处理,你看这里边它用set time out模拟对边毫米的基焦,这时间都给大家做了,然后再分发数据,当然了,分发数据和我们那个往呃mut里边提交一样,你可以通过类型和数据这么携带也是可以的,对吧,也可以通过我说的那种参数那种方式也是可以的,你看通过这种。产品的方式对吧?然后把所有购物车里边的这个数据拿出来,保存到购物车的这个这个选项里边,对吧?然后提交到这块,用那个常量复制的这块就是在一个JS文件里边保存了一个方法名,对吧?因为这里边提交自动串嘛,这个方法名对应的就是music里边的一个方法对吧?然后提交到这个方法里边,把购物车里的东西拿出来,然后通过这个方法,这个方法是清除购物车,那进入购物车相当于提交到呃,Mutations里边方法有一个把状态那个附上空就是了,然后是购买产品,就相当于往购物车里添加东西嘛,那这是这里边。
19:05
另外的一个调用的一个方法。啊。这个shop哪来他这个代码不完整啊,你你看一下,然后购买商品,把产品传进来,然后从这要用这个里边成功怎么办,失败怎么办等等,那完整的例子,咱们会自己去购物车,后边咱们做项目时候自己写购物车的时候,再通过这个完整给大家写出来,现在你就只要知道语法就可以了,那当然这个也没什么,呃,语法的部分。嗯,提交你看这块直接在I里边返回promise,又一个promise成功失败对不对,然后请求服务器这块请求处理,处理完之后返回1PROMISE,这样的话我们再调touch值就可以加,然后然后去处理对吧。拿到结果怎么处理啊,成功失败怎么处理,直接给返回一,当然了,咱们阿西奥斯自带的,咱可以直接。用就行了,直接返回就可以了。啊,其他没什么异步处理,所以呢,基本的语法就这么多,你只要记住首先知道它的作用对吧,作用呢,就是异步处理。
20:04
写在这个里面对吧,然后在模板里边怎么调用呢?通过dispatch调用,然后也可以携带参数对吧,然后他这里边儿呢,通过这里边如果想改变状态的数据,他通过提交的方法找到,他把数据更改,就这样的一个中间环节。啊,谢谢大家,这节课我们讲到这里,那具体的这几个的详细的应用,咱现在只学语法,详细应用只能在项目里边,根据项目情况去算,不然的话,如果现在我要给你写一个购物车添加整改的话,那我还得把接口做完,把所有的。呃,页面那些数据什么都做完,然后再往里添加,相当于写个项目,所以能直接到项目里边去,现在这个阶段你掌握预防就可以了啊大家。
我来说两句