00:00
大家好,这节课我们继续完成我们的这个例子,那这节课要完成了什么内容,就是给我们的头像下面加上我们的代办事项的一个数量,就说呃,代办的一个数量,呃,以及诶,当我们有这个代办事项的时候呢,这边给上一个小角标,就类似于这样的一个样子啊。那为了呃完成这一块的内容,我们先把样式给写出来,再去考虑数据的问题,也是我们先把这个呃这个角标给写出来,那既然要在这个头像的下面去加上一个啊这样一个列表项的话,那我们首先得找到头像。这个地方是在哪写着的啊,大家看一下代码,嗯,先给大家说一种比较简单的方式,再给大家说啊另外一种方式。最简单的一种方式呢,是我们直接诶全局搜索这个退出登录,看它这几个字写到哪里,然后每个编辑器的全局搜索的,呃,可件不一样,你像这个web是ctrl shift加F就可以打开一个全局搜索的一个。
01:01
一个地方,然后我们就可以搜退出登录,看它在哪里写着呢啊,那首先。这个地方。有一个推迟通路对吧?啊,但是并没有看到我们的这个。呃,头像啊,等等其他的一个东西。啊,所以说啊,而且这里是定义的一个没有定义的一个变量,那不是我们继续往下走。啊。找到这里可以看到啊,有这个个人设置个人中心,然后嗯,有我们的这个退出登录啊,那可能就是这个对吧?啊为为了做验证呢,你可以随便在这加一个内容给加个一,你看看是不是这个位置。好来是不是,那说明我们找对地方了,这是比较简单的方式,那我们想要在写那个我们的代办事项,再复制一下就可以了啊,当然你要是呃说你就是要按照代码的流程去找的话,那你怎么找,你首先看一下啊,它这个东西属于模板层面的对不对,那么我们肯定就是从模板方面去开始找,首先在这个SC来out,就布局里面我们找到这个。
02:04
贝斯莱奥塔,因为这个是个空白的嘛,那只能去找这个贝斯莱奥,到贝斯莱奥你会发现啊。这时候呢,呃,你会发现他用的是用的什么布局呢,用的是呃pro。Layout用的这个方式进行的布局,那你要去API文档里面去找pro layout,然后去看它所有的这个API哪个地方去设置,我们的就是说头像那块的啊,你看呀看看呀看应该是会。找到一个。嗯,看一看啊。啊,看着啊,有一个red container。就是right content render啊,自定义右部的render方法啊,头右部头右部啊,就是我们的这个头部的右部。找到了吧,是吧,那么好,你就看看我们的这个属性。就是他在哪儿用的。你接着往下找,会发现它是。
03:02
嗯。我搜索一下有点多啊,它是在这用的对吧?好,然后它这个回调函数返回了谁right content,你往上找这个right content。那right content是从这个全局的头部这个right content里面去引入的,是不是我来找到全局的这个格globaler,然后是这个right content。好,那找到这里之后,你继续再往下找,看看它去,呃,渲染就是我们那个下拉列表这里啊,来往下找。往下找,应该是在。这个是使用文档,这个不对。使用文档的话,应该是对应的是。啊,这里啊,那应该是在使用文档后面一点啊,后面一点,那使用文档后面一点是谁呢?是这个啊。头像对吧,那我们看看这个组件是在哪引入的。
04:01
这个组件是啊。找不到,那就是当前目录下嘛,我们找找它。哎,就找到了这里,好,这里你再去一步一步往下找,就看到了我们的这个退出登录,对吧,这样是我们按照代码的这个。有生日找比较费事啊,还是直接推荐大家,你直接全局搜索就完了啊,当出现多个不确定的时候呢,你可以在这啊随便去改一些东西,再去回头看一看就可以了啊啊。好,那我们先把这两个关掉,我们已经找到这里了,那接着去复制一个退出登录,写一什么呢?写一个代办事项,代办事项。啊。嗯,接着我们把这个图标给换一换图标,我们从我们的root里面。看一看我们的图度使用的是这个图标啊。然后把这个图标换成它。嗯,再引入一下找到。找到它这个icons,我们把这个图标给引入一下,好,接下来回过头来看一看。
05:04
是不是已经有代办事项了,那接着我们要在这个代办事项后面去加上这个红色的这个角标,对吧,这时候就要去找这个。去and里面去找这个角标,角标的话它应该是。嗯。应该是一个。Badge吧,应该是这个啊,就是这个。有标注啊好。然后嗯,随便找一个吧,就比如说。哎,比如说这个就可以啊。Byage。好,那我们直接复制一下吧。来放到我们代办实像的这个后面,然后给他一个,呃,让它自闭合啊,我们要引入这个组件才可以用,找到an TB。把它给引进来。那接下来呢?诶,这里我们就来看一看我们的这个效果啊。
06:02
刷新一下。效果是有的啊,只不过是贴的比较近啊,然后我们来看看他的这个文档API文档。应该是有能调他位置的一个东西,有一个off set啊,设置状态点的。位置偏移。看到了吧,啊,那么那么那我们来设置一下这个属性啊。好,我们来试一下这个属性。偏移量,它的结果是一个一个数组,那比如说先写个十杠十啊,我们先尝试一下看它的这个位置。来刷新一下。嗯,有点靠下了对吧,那应该是这应该给给零就好,其实。不让它上下有那么大的间距。
07:01
嗯,这样就可以啊,它也是刚好是居中的啊,那接下来呢。这块我们已经处理完了啊,但是我们要给他一个链接,让他点击的时候能到我们的这个图do里面,好,我们把这个链接给他点一下。代办事项。K啊,这个K我们改成嗯,Todo。改成这个图do,然后它应该是有地方去上面应该是配置的这个K,我们来看一看啊。嗯。K的话,它这里判断用作登录,然后去。Push到account k。那我们这里也简单的去去判断一下吧,就说我们如果我们的K等等于todo。
08:05
History加to,我们就直接跳到根目录的todo啊,并且要给它return掉。啊,不用停也可以啊,直接这样就跳转了,那我们来试一下啊。现在来点我们的这个代办事项。啊,还是做了一个account。那我这边还是要一停掉,不让他继续向下走,要不然他还是会走到下面。来现在再来点击就回到了我们这个代办事项,好,那这个我们处理完了,接着呢,是看上面还有一个小小的一个这个东西对吧。啊,那这个上面这个小的呢,其实还是他只不过他有一个。啊,这个东西dot这个一个属性啊,默认是for,当我们改成数的时候,就不显示数字了,只有一个小红点。啊,所以我们得在这个昵称后面再加上一个角标。
09:02
找到我们的这个昵称。我先复制一下这个角标啊。然后找到我们的这个昵称。Current user。这个是菜单。应该是在这。因为这边是定义的这个下拉菜单的这个列表项,你看看嗯,但是最终定义的这个列表项呢,是在在这去用的。啊,在这上面去用的。没有header DR to。嗯,是在这去用的。然后用户的昵称呢,就是。
10:01
在这你看current user.name所以我们要在它的这个后面去加上我们的这个角标啊,并且把它的这个do。给它设置成处啊,这样它就会有一个点。你看到是不是有个点儿。啊,但是这个偏移的话,我们就不让他去偏移了,来看一下啊。啊,那这个效果就跟我们的这个效果一样是吧,但注意啊,当我们呃,全部已经完成时候,就是说没有没有完成的时候,这个会消失,这个也会消失,那这个是呃。这个标签的一个特性啊,这个组件的特性,只要我们给成零,它就没有这个点了,我们来把它两个改成零试一下。是不是就没了啊,当它是有数字的时候,它就会出来。那这个UI我们已经写完了,那现在该来处理这个数据,这个数据从哪来,肯定要是从这个列表里面去获取,对吧,但不是拿了所有的,是拿这种代办的,所以我们在获取到所有之后,还要对他的这个呃呃,State进行一个判断啊,只有是代办的才符合我们的需求。
11:07
那我们,哎,就想办法去获取一下数据啊。按照我们的想法,肯定是。把我们的这个数量啊,给定义到这个状态中,对吧,然后就是把这个数量嘛,给定义到这个组件的状态中,然后就是说我们去,呃,在他的这个生命周期里面去获取这个图度这个数据,然后。哎,这个处理完之后,获取他的这个代办的,然后把它去。呃,这个更新下状态对吧,那这个是我们一般人的一个想法,那我们先按照这个想法来试一试啊。嗯。我来看一看啊。这个里面。那我们在这写吧。先定义一个状态。
12:03
啊,有一个呃,Todo number啊,一开始是零啊,因为这个是这个是类似的组件,所以我们得得这么去定义状态啊,然后我们再写一个生命周期component啊。啊,就是说啊发财以后。在这个生命周期里面呢,我们来获取。Todo list数据啊,并筛选未完成的。嗯,一步一步来吧,我们先获取数据,然后是筛选。这个呃,待完成的。待完成的数据啊。来,我们先来获取这个数据,那获取数据呢,是不是要使用我们的请求import,呃,Get todo list,哎,要用这个方法发起请求去获取,对吧?来count date等于这个方法啊,我们之前说过这个方法呢。
13:08
他是一个。网络请求对吧,而且它返返回的是一个promise。所以呢,我们可以使用啊a think,诶,然后加上A,让它变成这种哎,同步的方式之后,能同步拿到数据之后我们就可以。嗯,调用set state去修改我们的状态啊,辅助。嗯。等于啊,这个我先随便写一下吧,因为我们还得筛选呢,这是第三步才去设置状态啊,去修改状态,修改状态,那我。得对我们的这个date进行一次筛选,筛选我们得需要。啊,这个渠道这些就是说代办的对吧。啊,所以呢,我们这里来做一个呃,数据的筛选,返回这些代办的一个事项的一个数量。
14:01
筛选数据,我们一般使用这个。Filter。那这个先把变量改一改吧,我们这边返回的是一个todo list对吧,然后我们来对这个todo list进行一个筛选,它里面是一个一个的item,然后item就是我们迭代的一个项,我们来判断。啊,就是说return item的状态等等于零的啊,那我们直接用渐函数的一个简写啊,呃,完整的写法应该是我们要return。Return item.state等等于零的对吧?好,那么我们是不是可以直接简写,因为它就是一行直接一个return值嘛,来筛选出来这个item的状态等等于零的之后筛选出来的它的这个结果呢。就是我们符合条件的,那么我们取它的认识DTH就就得到了这个。啊,符合结果的它的这么一个长度,就是说待完成的一个长度,那最后我们把它给一个变量啊,Cost幅度number等于,诶等于这个筛选后的一个结果的一个长度,好之后。
15:12
我们就把它给到他对吧,那这个呃,一样了,是不是又可以简写了,那这个我们就不写了啊,因为我。呃,没有一步一步的去打印,大家在写的时候可以一步一步去打印,确定一下这个数据有没有拿到,然后这边筛选的结果正不正确啊,我们就直接去看结果就可以了,那这边我们更改了这个状态对吧。更改了todo number这个状态,那下面的角标我们就要使用上,这个状态就不再是写死的数字五了,而是我们呃,V4点。State这样啊,这个啊,所以看起来这个类似的组件还是没有函数式组件写着。嗯,代码精简啊。啊,还有一个地方用到了是下面这里对吧。来这里我们也用到了这个数量,好接着保存来看一看效果。嗯,可以看到是有四个代办的对吧。
16:02
而且这个角标也有,那我们确实是四个代办的,那我们去比如说去改一下,呃,因为我们这个数据是慕模拟的,那我们直接去改这个慕就可以了,来我把这个也改成一一有两个代办啊,我们来看看结果是不是会发生改变。好,我们来刷新一下啊。哎,变成两个了,对吧?啊,因为我现在我们还现在还没有做这边的这个功能已经添加都没有做啊,那只是把这步做完了,好那当然,呃,这种方式比较简单,就是在这个。呃,生命周期中啊,就是在这个组件挂载之后,我们去获取这个数据嘛,获取这个数据之后,然后筛选出来符合数据的,呃,这个条数,最后我们更新状态啊,这也是我们一般的一个思路,那我们来考虑一个事情啊。现在。是。呃,我们这个组件,你看这个列表。就是我们展示这个待办事情的列表,它用到了我们todo list的这个数据,对吧,通过这个方法去获取的,对吧?呃,是在这啊,我给你找到啊。
17:02
找到佩吉。Indexed。Pages,然后todoex,你看在这个里面。啊,我们去。发送这个请求,去获取了这个列表的这个数据,对不对,但是在这个头部我们也用到了列表的数据,所以我们在这里面也发起这个请求,获取这个列表的数据,对不对?好,现在只是两个组件,这样假如我还有其他的组件,比如说代办事项这个菜单,这里我还要把它显示一个数量呢,那就三个组件,你要在这里面你再去写一个啊,查询获取这个图do的列表,然后呃,筛选数量等等等等,你还要。这么来一套吗?啊,万一还有其他的组件呢,我们就假定一个数据,我们这个数据有有十几个组件,要用你一个一个的写一遍吗。是不是很麻烦对吧,那这时候可以怎么办。是不是可以使用。这个。使用这个model对吧,也就是他官方推荐的这个啊,我们让我们的列表数据交给model来管理,哎,就是说说白了就是使用d va,使用这个relax嘛,我们交给他来管理,那你哪个组件需要用到这些数据,直接从这个purpose里面去获取就可以了。
18:11
是不是这样的?也就是说我们将很多组件都用到的数据交给Rex来统一管理,对吧?但是我们使用的是ntd pro啊,我们可以呃使用这个d va,也就是model,很方便的去操作这个relax,不用我们再去写远程relax,哎,所以我们直接呃可继续把这个model给用上啊。那要要使用model的话,我们先在这个models里面去创建model,嗯,来创建一个。点。其实呃,每次都要写这个很多的一个东西啊,比如说命名空间啊等等等等啊,其实大家自己写项目的时候,随便就是复制一个去改改就可以了,那我这边。讲课的话呢,还是给大家书写一下吧,啊,Default,然后有这么几个状态,一个namespace,我们的命名空间,对吧?命名空间很重要,一定要全局为一,然后还有一个state,我们保存的这个状态啊,接着还有一个effect f fes。
19:11
那effect呢,是我们在这里去写一些副作用的操作,比如说去获取这个数据,对吧,那最后还有一个reduces,那在reduces里面我们来更新这个状态,好,那接下来我们来写一写啊,那命名空间就叫todo。呃,我们保存的这个数据就是to do list啊,存我们todo list的这个数据,那默认是空数组一个都没有,接下来。啊,这边写错了啊,接下来我们在这个受影响的这个。这个属性里面,哎,我们来获取,就是说查询。Todo list啊,那先写一个行,这个方法名我们自己定义啊,比如说你叫get to do list也行啊。它是一个函数啊,这个函数呢,有几个参数?来,我先把它写上,有这么两个参数啊,都是对象。
20:09
嗯,逗号啊,两个参数都是要从对象里面去解构出来,我们用到的一些参数,那比如它的一个这个配漏的,当我们有数据传过来的时候,我们要。就是通过他来接收传递的数据,对吧,但是。嗯。我们暂时用不着啊,包括它第二个的这个call back这些我们都用不着,所以整个第一个参数我们都用不着,用不着的话那就不写了呗,用这个这这个来代替,真正用不到的是我们第二个对吧?那第二个对象我们可以解构出来一个call和一个put,对不对?那call呢,可以让我们去访问呃,一些方法去获取数据,那put呢,可以将我们得到的数据去,呃派发给这个reducer,然后去更新数据来写一下啊呃,调用。方法啊,获取数据,获取数据,呃,这边我就用res data啊response date就呃防止大家就是分不开,然后它应该是我们的这个get todo list啊这个方法。
21:12
对吧,这个方法去获取,然后因为我这样回撤的话,它能自己帮我引入,如果没有自己引入的话,就是说你编辑不支持的话,你手动引入一下好,当然这个方法不能直接这么调用,你要使用这个靠去调用这个方法啊,当然。它呢也是会存在一个一个异步的一个情况,所以说我们这里使用的是这个,呃,生成器啊,就是说星号加这个啊E的LD这种方式,我们来解决的这个一步的一个方式啊啊嗯,在我们得到这个数据之后,嗯,就使用这个put把我们的数据啊派发给reducer。来,接着。呃,还是使用这个。啊,Put。啊,Put是一个方法,方法里面呢,接收一个参数,参数一个对象,对象有两个参数,一个是type。
22:02
就是我们要呃设置的这个呃呃有点就是类似于那个re relax里面action的一个type,一个类型啊,接着是一个呃配漏啊,就是我们要传递的一个数据,我们把res date啊这个数据啊往下传给他,然后这个类型我们就自己定义了,比如叫set。嗯,应该是。应该是,呃,就是set to do list,为什么这么取呢?因为呃,我们这个呃,Type也是这个行为的一个作用,就是把我们获取的这个数据,然后啊,对我们已有的这个原有的这个状态进行一个更改,就是set嘛,设置啊接下来reduce里面我们就来。哎,写这个方法啊,那这个方法呢,它是一个纯函数啊,所以我们呃,可以接触到哦,两个参数啊,一个state,一个action,那存函数呢,我们不要对不要在这里面进行一些呃有副作用的操作啊,不要操作外部的变量啊等等啊,最后就说我们得到一个。
23:03
呃,就是传一个什么值,我们期望就是说返回也是同样的一个值啊,这是传数的简单一个概念。所以我们直接。Return return一个对象,那对象呢,就是。呃,Return state就是我们保存的这个state啊,那首先把原有的state我们给它展开,然后把我们要修改的要修改成todo list对吧?把它修改成什么呢?修改成这边传过来的这个数据,那整个我们这个put传的这个参数都会被这个action接收,对吧?我们是要写action里面的配漏的,对不对,X点。配漏挡好。这样就可以了。看到了吧,啊,当然你如果。想写这个,呃,箭头函数。也可以啊。我们就这么写吧。接下来。这个model我们定义好了,那现在我们就要使用这个model,对不对啊。那我们来在这个。
24:00
头部。来使用这个model,那我们这个就先不不用了,给大家先。先注释掉吧,啊先注释掉。我把它给折叠一下啊,然后这是我们的第一种方法。方法一,发送请求获取数据啊,这是我们的方法一。接下来呢,就是我们的这个啊方法二。方法二。哎,就是使用model获取数据好。那要使用这个model,怎么去使用呢?哎,我们可以。先看一下啊,我们的这个组件看一下啊,它确实是用这个connect已经连接过的,对吧,而且把这个呃呃,我们状态里面的user给传了过去,是不是你看user,那接着呢,我们还要再去传一个,哎,传一个谁传一个弧度啊。
25:06
好,这边我们。也要把这个todo先给他。嗯,逗号解构出来。啊,从参数里面我们取得这个图度,然后再把这个图度给给,就是说传给这个呃,UI组件,UI组件去用啊注意这个里面之前给大家讲过,这个参数的话,我们是可以。就是拿到这个,呃,Models里面的。呃,这个model啊,那我们这里可以指定对应的name space,比如说我们指定这个todo的name space,你就可以拿到这个todo的这个model,那我们把它最后作为返回值啊,返回出去,返回之之后呢,这个UI组件就是我们的这个组件里面。啊,就可以用了,就是我们的视图组件就可以用了啊啊这也是一个一个简写,实际上我们返回的是啊todo啊todo等于我们这边参数截过来的todo嘛,那我们直接简写就可以了,好这时候呢,我们就可以在。Purpose里面去接收到这个todo啊,这个model,不信我们来打印一下啊。
26:05
嗯,Cons log log啊,This purpose,好,直接打印那个list.purpose给大家看一下所有的这个。Purpose。往上提一下啊,然后清空刷新一下。在这啊。这个就是我们打印的这个,呃,Purpose。好,那我们来看一看是不是有一个todo对吧,那个todo就是你看我们的todo例子是一个空,对不对,因为我们这边定义的这个状态就是空。对吧,我们还没有调这个方法去更新这个状态呢,是不是。好,那。怎么办?我们是不是得去?调用这个model去更新它的这个状态,对不对?那怎么调用呢?之前给大家说过是不是要使用一个dispach,而且这里面它已经把dispatch给我们传过来了,对不对?所以我们直接使用this.purpose.dispa哎。
27:09
这里面啊,它是一个函数,接收的参数是一个对象,但对象呢,有两个参数,一个是type,就是我们要操作的这个。呃,Model的一个类型,再一个就是呃,配漏的就是我们要传给呃。传的一个数据啊,传的一个参数,注意这个type啊,是命名空间加方法加函数名啊,命名空间我们用todo这个命名空间,然后斜杠,斜杠呢就是说todo通过这个秘密空间我们能找到这个model,接着斜杠后面我们写要操作哪个方法来,我们要使用这个方法对吧?好,那它第二个参数配漏的就是我们要传给这个方法的一个数据。清楚吧,啊,如果我们传了这个paylo的这个参数的话呢,就会被呃,它第一个参数里面的这个。这个paylo给接收到啊,当然我们现在是不需要就就不写了。那知道就可以了,哎,这样。
28:02
我。派发了,就说调用了这个get to do list之后啊,那数据就会来进行一个。更新。这时候我们来继续打印一下这个purpose啊呃,this.purpose我们就直接打印到todo吧。啊,这logo来看一下啊。刷新啊。嗯,那这个报错呢,不要烦人,我们先去解决一下,看一下报错在哪,是这个todo index31行,来找到这个todo的这个index的31行看上去啊。31行是我们这里用到的这些A标签没有给K啊,把它给上,因为他会去呃迭代这个数据K,诶,然后我们就给个零吧。然后这个这个K。我们给个一完成,然后这个K给个二。啊,这个时候再刷新就应该不会有了。
29:02
啊,但是这时候看我们的图,Do离子还是空对吧,那为什么是空呢,明明这边。我们已经使用model去呃这个更新了这个数据,那这是因为生命周期的问题啊,我们这里面只有它,就是挂载完毕之后执行一次,对吧,然后随着它这个,比如说呃,Re里面的这些状态的一个改变,它会重新render,也就是说render方法会重新执行,但是这个方法并没有重执行啊。所以我们怎么办呢?我们在这个render里面去打印这个purpose给大家看一下来。现在来刷新可以看到啊。Render,这里面是不是就拿到了,那我整个清空页再刷新一下。第一次的时候render是不是零啊,因为一开始的render是没有数据的嘛,啊,随着我们的这个,呃,数据获取成功之后就有数据了。是不是啊,这个一定要注意,也就说明我们这个方法是执行成功的啊,那数据也拿到了,这时候我们把这个筛选。
30:02
嗯,就写到这里就可以了,写到这个啊,这里面就可以了啊,那因为是直接在这里面去。呃,电影的这个。就是说这个东西就就没了,他是。之前是我们是获取了这个数据,对吧,那这个现在就要换成谁,是不是换成这个this.to do。里面的todo list啊,Todo呢,只是我们拿到了这个model对吧,那model里面我们状态存的是谁?是todo list,所以这里面你还要点到这个todo list才可以,然后去筛选,筛选之后点认给到我们定义的这个常量对吧,那下面。就是就不再是this点,而是直接使用这个常量就可以啊,我们是在同一个run方法里面,所以这边定义的变量下面直接可以用的,没问题的啊。把这个也给删掉。好来保存。再来看一下啊,我有投篮。伤心。可以看一下,诶,这里是不是有两个啊,两个代办对不对,那说明我们使用这个model的方式也解决了这个问题,对吧?啊,那有时候呃。
31:08
把这个打印我们就关掉,然后把我们的呃代码给稍微精简一下,比如说像这个to do list完全可以从。This purpose的todo里面去结构出来。这样就可以了啊,一样的结果,那比如我们上面使用的这个dispach,哎,你也可以比如说提前把它给解构出来啊第四。第排CH等于this purpose。啊,从这个purpose里面解构出来这个第排。嗯,这个的话,想想再展开一层的话,你可以再再展开一层,那我们就先这样写吧。来再看一下,确定一下是没有问题的。那这个我们只是解决了上面这个的问题,对不对?我们想要做的什么,我们为什么要用model,是让这个列表。
32:04
也能去用到我们model里面,呃,维护的这个数据对吧,好,现在头部是用上了,那接着我们来去改一下我们的列表。嗯,找到index.ts叉,看看我们之前获取数据的地方。嗯,哦,这里我们是使用request去获取了这个数据,那我们如果使用model的话,我们就不需要request的,清楚了吧,因为什么呢?Model里面已经在这里已经发起了这个请求了,你没必要再请求一遍,对不对,所以我们还使用这个,呃,Data source啊,这个date,但是这个date从哪来呢?那就要想办法从。这个model里面去获取对吧,好。嗯。要想让我们的这个组件去使用上这个model必须得做什么。你必须得是。这个组件和我们的这个model进行一个连接,对不对,你看现在我们直接暴露是不行的,你得使用connect的方法做一个连接,对吧,我们来从这个。
33:05
五米里面input。Ne connect啊这个。算了,我自己写啊。From。从这个五米里面,哎,导出这个connect,然后我们最后不要直接暴露这个todo,然后暴露这个connect,然后它的。这么的一个格式,写多了大家就记住了,然后它里面。嗯,就开始写我们的函数了啊,我一点一点给大家写对吧,一开始肯定是一个回调函数是这样的,对吧,那接下来就开始写这个参数,它的参数刚给大家讲过是。所有的这个models对吧,但我们只要谁,我们只要这个todo对不对,所以从这个呃参数里面,我们使用这个结构的方式,你看解构出来这个图do,最后把这个图度作为返回值啊。返回。它要返回一个对象,返回一个一般的对象啊,就是返回一个,就是我们把这个图do,然后。
34:06
呃,返回一个对象嘛,然后K就是我们这个UI组件里面能拿到的,能使用的,然后这个Y6呢,是我们从这个model里面结构出来这个,呃,这结构出来的这个图度啊,把它给到它,它呢就能在这个UI这个组件里面啊,容器组件由我们视图组件,我们视图组件或者UI组件里面去使用。清楚了吧,啊,但是这两个名字一样了,我们就就就简写了,但这个括号你比较少,因为我们要返回一个一般的对象嘛,那对象你不能直接直接返回呀,是不是你要在括号里面返回,这是简乘函数这个简写啊对吧,好。那这时候呃,一样啊,跟刚才我们的这种类似的组件一样,只要我们把。我们的组件啊,和这个model进行一个连接之后,我们的这个组件里面,哎,我们的UI组件里面就能从purpose里面去收到这个图do。清楚了吧,啊,我们来看一下,那因为这个这个date呢,没有定义,它会报错,我们先给它注释掉,然后在我们的这个里面啊。
35:08
我们来先打印一下这个purpose purpose,因为这个是函数组织呀,所以purpose我们要在这里去把它给引进来啊。嗯。purpose.log好,来验证一下,看purpose里面有没有我们传的这个图do。打开控制台,先不用管数据,数据我们都注释了,没有是正常的。只看我们的这个purpose是不是有这个todo,而且todo呢,List它是有这个数据的。清楚了吧,啊,那为什么会有这个数据呢?这里我们明明没有去,呃,PA,哎,那我告诉大家为什么会有这个数据,因为我们的这个在这个头部,你看就是我们的头部,这里我们已经pach了,然后todo list,就是说todo的这个get todo list已经就是更新了维他维护的这个状态。清楚了吧,所以说我们在这个列表里面是可以直接去使用的。
36:02
啊,明白吧,所以你看这个purpose里面,我们是可以直接拿到更新后的一个状态,这也是印证了刚才我说的那句话,诶。我们如果有多个组件要去用到一些数据的时候,呃,把它交给这个model啊,就是说或者说使用,那就是让数据进行一个共享,所有的用到的地方直接从这里面去取数据就就可以了,就比较简单,你看我只要把它们呃连接起来,我图do里面purpose就可以直接拿到。哎,我这个model里面啊,Dva帮我们维持这个数据,对吧?啊那。还不简单,我们就直接来cost。等于。purpose.todo。然后我们把它的todo list从这个里面去解构出来吧,因为它还有一层,对不对。那这个就是我们的todo list,然后诶这个data source,那就写我们的to do list吧。
37:00
啊,或者说。哎,我们todo给它改个名字就改个data,哎,我们在解构出来的时候,是不是还可以重复命名,为了重名字data用这个date我直接给了它。然后来保存,看一下结果是不是有的一样的结果。可以看到是不是一样的结果,好,那我们把这个注释关掉,注释写一写啊,把那个打印关掉,注释写一下,这是方法二,方法二使用model获取数据,哎,是不是比刚才这个要简单多一些,那这个是我们的方法一,我们这是给大家笑啊。方法一,嗯,直接发起请求。发起请求获取数据,但是这种方法并不是特别好,对吧,你如果真用方法一的话,你你都不如直接在request里面去写这个请求,是不是这样的啊,好,那这一小节,呃,我们尝试去使用到这个model来,呃,让我们这个共同用到的一个数据交给这个model来来管理,这样的话,我们列表能用到,我们的这个头部也能去用到。
38:03
好,那这小节先到这里。
我来说两句