00:00
好嘞,各位同学,那咱呢得接着继续了,对吧。那咱们呢,先说一下子,那上午咱们完成到了哪里啊,是不是完成到了色路由组件。那这里啊,要注意一件事。就是咱们现在的色路由组件啊,它只是一个静态的组件。这里面所有的数据啊,都是假的。对不?那当然咱们也做完了另外的几件事儿,对不?写完静态是不是要发请求,请求咱们已经搞定了。以及仓库当中咱们也准备好了数据,对不对吧。那所以说啊,咱们上午讲到了哪,讲到了这里,已经拿到了服务器的数据,而且存储在咱们的仓库当中。而且呢,老师呢,得说一下子,仓库当中这个数据初始化状态到底是空数组还是空对象,这里千万不要自己去遐想。
01:05
这里一定要注意啊,它是由服务器的数据决定的。对不?那咱们呢,去看一下咱们的仓库,那仓库当中,现在咱们注意力应该放在这个search,那search select不就是仓库当中的数据吗?那当然咱们已经准备好了。好吧。那就对于仓库当中的这几条数据啊,老师呢说说。那首先说说谁呢?先说这个good list。Good字啊,Good list,它是什么意思呢?是产品的列表。固这个单词啊,它呢是有好的意思,还有产品的意思。那其实啊,这块的数据对应的是谁呢?对应的是咱们底下的这些售卖产品的这些信息。对不,而且默认服务器给他返回的是十条数据。看这啊,这是不是能看见。
02:01
所以说这块的数据good list对应的是底下售卖产品的这块的数据。对吧,那当然还有别的数据,那咱们再看一下子。比如说啊,还有一个叫做trade list。虽然说啊,有的同学可能不认识这个单词啊,叫trademark trademark是什么意思?是品牌的意思。品牌的列表啊,这块一定要注意,Trademark是品牌的意思。那这块是谁的数据呢?应该是设置路由组件当中,这个子组件内部的这品牌的数据。对不就这块儿的数据是trademark list。对吧。那以及还有一个数组啊,就是这个at tr list。At tr呢,是属性的意思啊,是属性列表是谁呢?是这。因为你想想,平台卖的东西是有他自己的售卖属性的力量。什么叫做售卖属性呢?举个例子,咱卖手机的,那你手机是不是得有像素啊?
03:03
多少钱呢?对不,你多大平的,那这些售卖的属性你得在这里能让用户能选择。这能懂不?能懂能懂给老师扣一个六,因为你想想作为任何一个电商平台,你购买的产品,比如说老师买的是索尼。对吧,或者买的是苹果手机,那你是不是得有一些售卖的属性能让我选择对不。你多大平的?你是16寸的,17寸还是100寸的?你多少摄像头的像素多少,是2000万还是3000万,多少钱,你这些售卖的属性也得展示。对不?那所以说at tr例子是售卖属性的列表,也是一个数组。对不,那当然底下这儿还有几条数据。这几条数据呢,将来也是有有用的,这几条数据是给谁用的,是给底下这个分页器去用的,就是底下这个分页器。
04:00
对不?那首先说配置no代表啥?代表的是,假如说有非二七代表,当前是第一。OK吗?代表的是你这个分页器现在在第几页。对不,以及还有一个叫page size。配置size是什么意思呢?是每一页有多少条数据,就比如说咱们默认展示到这个静态,你看这第一页是不是有十条数据。对不?所以page size是什么?是每页展示的条数,那还有个什么叫total?啊,Total是什么意思呢?是你总共这个分页器啊,一共要展示多少条数据。假如说现在就有五页,那每页有十条,那一共是不是50条。这个数学能算懂的,假如说第一页有展示十条数据,第二页也是十条,那总共五页,那一共不就50条数据。所以说这块窄这块的数据是什么,是一共有多少条数据。
05:01
对吧,那以前还有偷偷配置,这代表什么?代表的是一共有多少页,是五页还是四页还是三页。所以说啊,老师把这些数据呢,稍微给你们说说。对吧,好嘞,那接下来啊,咱们仓库当中已经有数据了,那咱们就得把这些数据给他展示出来。对不,那正常说。正常说,那咱们是不是得回到组件当中捞数据。那组建咱们找一下应该找谁,是不是找咱们的这个色。是不是找他?对不啊,那这块是咱当年测试的X先放在这儿,那老师问你啊,那咱现在如果要动态的去展示这些数据,老师先把这个给他先合上,你是不是得捞数据。对不对,你捞出去又得怎么捞,你是不是得这么捞,叫做computed啊,叫做comp computed对不对。
06:01
那还是以前的套路,那你是不是得用map state把仓库当中的数据映射为组件身上的数据,对不?你该怎么玩这么玩import?对不,Map state for wrong,谁没唱?你这不同样有套路吗?但是你这里面要写的时候,你看得怎么写得这么写点点点map state是不是得写个对象。对不?那举个例子啊,咱就举个最简单的例子,老师我问你啊,你就说仓库当中这个色是仓库当中的这三个数组要不要用。哎,老师问你就仓库当中的这三个数组要不要用。你说将来要不要用,一定要用。对不,那就举个例子,现在就比如说老师想要这三个数组的数据。对不,就比如现在老师想要产品列表,这个数据我告诉你,你写你该怎么写,你该怎么写。这么写你看叫什么,他那块是不是叫固资。
07:03
List,那咱也叫库兹list,你是不是得这么写,怎么写?这个是大仓库当中的state,你得这么写。咱们也一点涨。你得先找到大仓库当中state,找到state下的search search下的search list下的这个这个这个这个数据。对不,你得怎么写,你得这么写,叫state.search对不,点完了叫啥来着?叫search list。点你还没完事呢。对不?Search list点,比如说叫做good list,呃,Good list,你这样才唠叨叫search啊,错了,叫good。你这样才唠叨。但老师问你啊,你这么捞,在捞数据的时候,我问你写的是不是很长。对不,而且容易怎么的写不准,那当然你这种写法能不能捞到数据,那一定是能捞到数据。对不,你看咱们看一下坑口闷资,你看一下咱们的这个这个这个这个色齿组件,你看这样能不能捞到数据能。
08:06
但是你要注意这种写法吧。可不可以,可以,但是说写起来吧,有点麻烦。那你为什么不在仓库当中,已经把咱们想要的数据整理好,到时候简单一映射不就完事了?也就是说你现在在这里写行不行,行,但是这种写法吧。老师不建议这么写,因为你看这这,你如果有一个地点错了,你就完蛋了。对不?所以说咱们的这回呢,就不这么写了,老师就给它去掉。这回怎么写?这回咱们说说谁说说这个get兹。OK吗?咱这回要聊的是谁?聊的是getter兹,因为getter兹在咱们项目当中,咱们曾经从来没用过,对不对。对不,所以说咱们今天要运用谁,要运用get。对吧,那当年宇哥教咱们的时候应该知道。
09:03
VO当中的getters应该是啥?是用于计算属性。对,不但是这句话对不对,一定是对的,但是你要注意,咱们在项目当中,记住以后工作当中也是一样,在项目当中。Jett,该尺子它的主要的作用是是什么,是简化。仓库中的数据。什么叫简化呢?就是当组件想捞数据的时候,捞仓库当中某一条数据的时候,让它更简单一些。就不像咱们刚才点点点点点这能不能懂。能懂的给老师扣一个一。也就是说,这个gets的作用是什么?是简化仓库中的数据。他是为了简化数据而生的。这块一定要注意,就是gets是为了简化数据而生。
10:04
啊,就是简化数据而生。这能懂不啊,好嘞,那举个例子。咱们刚刚也说了,你说仓库当中的这些数据啊,就咱就举个例子。现在设下的这个数据的格式吧,这有一说一。还不是很复杂啊,这个是有一数一,还不是很复杂,但是说你咱们刚刚捞数据的时候,你会发现,其实就比如说老师想要捞这个产品列表,那你该怎么整。你是不是得外层的这个大的state打点模块,它得到一个对象,对象当中的search info是不是又是一个对象再打点。对不对,所以组件在捞的时候它比较麻烦,那咱们可以怎么做呢?可以这样做,就是你在仓库当中。把你将来想要的数据都给它简化了,到时候组建捞的时候就方便了。
11:01
就这能不懂?所以说这块什么意思,就是把把咱们写一下就gets,可以把我们将来在组建当中,哎当中。当中需要用的数据,需要用的数据简化一下,那这样的好处是什么?就是将来。组件在获取数据的时候就方便了。OK吧,那你看将来,那咱们计算出几个数据吧,就比如这三个数组,将来一定会用的。对不,那咱就比如说先把这个good list先给它计算出来,咱名字也叫good z list,当然你叫别的也行。那它它是不是一个函数啊。诶,是不是一个函数。对不,这玩意叫啥,你可以认为是计算属性,那计算属性是不是得要一个值,但是你要注意啊。
12:01
这个gets这个函数当中,我问你这块有没有给咱们注入一些东西。就是这块有没有给咱们注入一些东西,说老师我忘了忘了,你先打印一下,我打印个A。对不?你看你conso.log a,你看A是什么。咱们运行一下啊,你看A是什么鬼。你看。来,老师先把这些没用的给你删了,你看再刷新,来你看这个A是什么,老师问你。老师问你们这个A是谁?就这个A。你看吧。A是谁?告诉老师A是谁?A,是不是当前的这个search模块,这个小仓库的这个state是不是?对不对,你自己再看下,它可不是那个大的仓库,是当前仓库的。这块一定要注意是当前仓库的这个。
13:03
对吧,你看这这不都能看见吗。对,不可不是包含home,所以这块一定要注意,就是这里面的这个行参,这个state是谁老师写一下state。写下state。这里有人说,当前行参。State。他是谁?是当前。仓库。中的state并非什么,并非大仓库。中的那个state。对不?那你看咱们以前说过,什么叫做计算属性。利用已有的属性的属性值造出一个新的属性对不对?那你计算属性你不得返回吗?返回的值作为这个新的属性的属性值对不对?你这块得呢。你回来的结果是作为这个新的属性的属性值,那你怎么,那是不是应该是state。
14:06
点search list点看一下应该叫谁。来看一下,应该叫啥玩意呢,忘了。叫state下的,呃,这个这个这个这个这个such list是不是叫good list。对不?所以叫啥叫good list,但你要注意你这么写。OK吗?你这会儿得琢磨。或者咱们就先这么写,一会儿再出现了问题,咱们回手再解决。OK吗?也就是说你这么写将来是有问题的,就是这样书写是有问题的,什么问题呢?举个例子啊,老师问你。老师先说一下。也给你们打个预防针,你琢磨琢磨,我问你。仓库当中这个state的这个search info这个属性的属性值,我问你有几种状态。
15:06
我现在就问你啊,现在仓库当中的这个state的这个search info,这个属性的属性只有几种,是不是有两种,第一种默认是一个空对象。第二种,服务器的数据回来了,是我把服务器的数据给它进行替换。对不对,就这能不能相等,你如果这块要这么写,可能会出现问题,什么问题,举个例子,老师没网了。这能懂不?就假如说老师没网了,我问你请求能发出去吗?发不出去。你请求发不出去,我问你,那这个仓库当中数据我问你,它永远是一个空对象。对不?那如果是空对象,你自己琢磨琢磨,对,是他。你打点奢侈什么什么,呃,List没问题,得到是这个对象,但是空对象有这个good list这个数据没有没有啥是按底饭。
16:00
就这个能不能懂。老师再说一遍啊,就这一定一定要注意。老师再说一遍,你看假如说老师没完,因为咱们这个数据它是有两种状态,第一种是空对象。第二种是服务器的数据回来了,三连环我进行修改。那你这里要注意,那假如说我请求没发呢。对不,因为他最开始的状态是啥,是个空对象。对不就比如空对象的情况下,你死。点search list,再点这个good list list词,我问你空对象打点这个属性得到值啥,是不是按底范,你按底范正常说咱们想要的是个啥,是个数组你看嘛。咱正常说这条数据应该是一个数组,那你在那边便利的,你变了一个安底范,我问你会不会报错。这个能不能想懂。就先把这项走结构,写不写明白无所谓,那个咱们一会再写,咱最终这块老师也先给你说说,就这块你能不能想懂。
17:07
比如说你这块呢,它有两种情况,就是你返回的这个值有两种情况,哪两种,要么是按底翻,要么是服务器返回那个数组。就这,他不想走。能不能想走,能想走,给老师扣一个一。来,能不能想走,能想走扣个一。比如说你现在这么写可不可以,可以,但是他返回的可能是安底范,也有可能是服务器返回那个数组。对不对吧,所以说咱们就先放在这儿,就先这么搞。OK不,到时候咱看看有没有问题。OK吧,好,那咱们再简化一些数据,比如说还有谁。将来咱们这个trademark可能要用,那不是可能一定会用,那咱们也简化一下。那咱这个新计算出来的这个属性也叫trademark。对不,那也来嘛,Trademark。
18:02
他也有人you。对不,哎,那也有谁,那它应该是state.search list.trademark list。对不,那以及比如说这块还有一个数组,这还有个数叫at tr售卖属性,那咱也先给它计算出来。对不叫叫叫叫叫啥来忘了来回手看一下,就这个,咱名字也叫这个,当然你不叫这个名字也行。对不,那这块咱也来叫as a state,对不,那你也是一样,Return return谁return state.search list点点谁点咱们的这个这个这个这个叫啥来着,就是它。对不?所以说咱们做了一件事,什么事,就是这里面的gets,把服务器返回的一些数据咱们进行简化了,将来组件在捞的时候就方便了。
19:00
咱先别管里面代码有几种情况,现在老师你就这种写法能不能理解。所以一定要记住一句话,什么话?就是gets为谁而生?为简化数据而生,因为这个新的属性的属性值,它不简化之后呢?对不,那所以说早给他合上。那咱回到组件当中,咱们先试一下行还是不行。咱找一下谁找一下色。那这回咱们再捞数据的时候,就不用map state,咱们怎么捞,是不是捞仓库当中已经计算好了的。这几个这不是都已经有数据了吗。就不用再找stay下的什么什么,呃,设置一下子设置list色下的什么什么,他连续打点。你就直接通过map gets,把getters计算出来的东西映射为组件实力身上的属性就行了,就这能不能懂?老师问一下map gets学没学过?就是map gets有没有学过,学过吧,那所以说来咱们先一个来。
20:06
那首先说咱们先搞谁,你看这样,就比如说咱们先搞设置路由当中的这个商品列表。OK吗?O,不OK,就是咱们先搞谁先搞这个设置路由当中这个这个商品列表就这。他用的谁是不是固的例子兹,那咱们就得映射了,你看嘛来。Import。叫做卖呃,Gets。对,不从谁那引进来的,是从from RO from view。那这回你把数据映射为组件实例的数据,是不是就很简单了?点点点。呃呃。computed。啊,不是comput,对不,点点点map gets对不?那这里要注意这里的写法,它可写的不是对象,因为gets它不像这个仓库当中这个,你看仓库当中这个state是分模块的。
21:07
仓库当中,你看老师给你说一下,仓库当中这个stay是分模块的,分home和色,而gets是不分模块。这能不能看出来?别老是一个回音。就是仓库当中的这个state是分模块的,分home和search,而gets是不分什么home search。所以说你在捞的时候就可以直接写数组,你只要仓库当中有这个叫固的资。List,我就能唠叨。对不?哎,那咱们看一下子是不是叫这个应该是啊,叫good list good对,那咱们刷新一下,看一下子咱们当前的这个组件,就是这个设置能不能拿到good资list是不是可以。你看吧。对,不能不能拿到,能拿到吧,来老师问你能不能拿到,是不是能拿到。
22:00
诶看这是不是能拿到,组件身上是不是能拿到,但老师现在就问你,我现在从仓库要数据,要咱们自己想要的数据,是不是比最开始的写法的时候是不是简化,就这能不能理解。你就先把这理解,你先理解该特子的作用,它是为了简化数据而生。那咱们想要的数据,你看这回拿的时候是不是就很简单了,说白了这是一个计算新的属性,属性值咱已经有了,直接捞到就行了。对不啊好嘞,这是它那这里啊老师呢,要写一下子。就是map je t多少,哎,Jet s它里面的写法呀,哎里面的。写法。传递的是什么呢?传递的是数组。OK吗?因为什么呢?因为咱们的GS计算是没有划分模块。
23:02
什么模块?就是它没有home和什么什么色是之分。这能懂吧,直接用数组,你只要仓库当中有叫这个呃,Good list的这个属性,我就能捞到。OK吧,好,那这回咱用用你看啊。那首先说产品列表不应该是底下这一部分吗?对不应该是哪,咱找一下结构看这。他应该是谁呢?应该是底下这对不,那咱们看是哪,是不是销售产品列表是不是这里。看这是不是这里。销售产品列表是不是在这儿呢?是不是这十个。你看嘛,咱数据都有,这不十个数组吗?数组里面有十个对象嘛,这明显得被干放。那所以说把这给它展开,你看它现在是不是有静态的,是不是十个好多了,只留几个,只留一个。对不,我看没没做准啊,没剁准这样的老师重新给它折叠一下。给这剁准了。哎,走走走走行啊,底下还有是吧,这还有走行,那这一块咱就给它剁了,只留一个。
24:09
对不,那好,那咱们V杠放下V杠放。那便利便利谁,比如说咱们就叫什么,就叫good。产品对吧,In that便利谁是不是便利,咱们那个叫good the list是不是就是它。对不?那当然你是不是得写咱们的K冒号,K为什么为产品的,看一下有没有ID。看一下的这个数据有没有ID。看一下。呃,有没有ID,有就good的ID。对不i.ID那咱们先看现在是不是也是十个。刷新一下,先看是不是也是十个。就这没问题吧,现在是不是也是十个对吧,那咱们接下来你还在搞搞什么,里面里面你得替换了。对不,那首先说啊,他这块呢,有个啥呢,有个A标签,这是不是有个图片,看这这是不是有个图片。
25:06
来看这老师给他换个行,你看这样。这个不就是咱们产品的那个图片嘛,就是谁就是他。那咱们得替换,替换成谁的,咱得看一下它应该是谁呀,应该是good下的这个default image。对不,咱们把这个K给他捞走。那这块应该写成谁应该写成动态的冒号。叫固。哎,叫good点点,谁不点点点点这个这个叫叫叫叫啥来着,叫defa image字。对不,那咱们先看一下子刷个新,你看一下走,你看图片换没换。来图片换没换?看这图片换没换?来,老师问你图片换不换,是不是真换了?真换了,这已经换成服务器的数据了啊,看这吗?这块有个图厉害。
26:03
对,这是他那以及产品的名字,就这产品的名字。你也得替换,就是这个价格。对不,那所以说咱们还得找找谁找。他应该是good下的这个,这个叫price。对不,那所以说你看这儿,咱也把这个价钱给他改了。这块得换成谁,换成咱们这个叫good的price price,对不多了一个大括号。那这回咱们再看那价格是不是也改了,你自己看吧。对不,价格是不是都改了。对吧,那以及还有什么呢?还有就是这个标题。标题应该是谁呢?咱们看标题啊,它应该是这个这个这个叫呃,Title。对不,那所以说咱们这也得改一下,就是谁就是这个A标签,这这不写的什么苹果什么的吗?这块给他替换一下。
27:00
对不,那这块咱给它剁了,换成谁就换成咱们的叫good的title。对不,那咱们再看一下,刷个新看一下走,你看。是不是就来了?对不,就这能不能理解同志们?就这能不能理解?诶,给个回应,就这展示动态数据能不能理解,能理解给老师扣一个一这块没什么难度啊,剩下的没有数据了。看这剩下的没有数据了。看这啊,剩下的是没有数据了,就在1233条数据。OK不O不OKOK吧,好嘞,就是它。但是这块呢,你一定要想的严谨一些。这块呢,有一说一老师还是得说这玩意你得想的严谨一些,虽然现在没有报错,但是你得想到。OK吗?这块一定要注意,虽然现在没有报错,但是有一个地儿你得想到想到啥,因为现在现在老师是在直播呢,是有网络的状态下,那假如说没有网络。
28:12
你看这样。就这,一定要想通。就将来这个套路也会常用的,你就就那就这个仓库这。就现在你捞数据,展示数据是没问题的,但是你要想明白一件事,什么事,假如说老师没有网络,我问你,你这返回的是个啥,是个案底饭。这能不能等?你看现在老师我没办法给你们演示演示什么,演示没网,因为没网咱们就直播不了了,但是这种情况你要想明白。老师再说一遍啊,我再说一遍,就这块儿你得细细的去想,你看现在运行起来没问题,没毛病,你该有的都有。这种懂不?哎,对,这个同学说的对,浏览器这儿可以调,你这么一说给我过过矛盾矛盾色开。
29:04
咱就举个例子吧,咱不用说没网,咱就来个慢的3G。你看啊,他有可能出现什么像,就是你网络慢。你网络慢,导致着你服务器的数据还没回来呢,你那边就开始变利了。他可能会出现问题。OK吗?当然这个慢的,这个这个网络它也行,对不,那online就不行,Online就全没了。这这能懂不?呃,虽然咱们这个慢,虽然是个慢3G,但是也挺快。这也挺快的。对不,这个老师还是切回来了,这这这拉倒就这块儿呢,你得想的详细,咱就举个例子啊,举个例子,假如说你没有网,你反过的本身应该是一个数目,但你现在如果没网,我问你返回是不是一个安底范。就这能想走?所以说,为了以防万一,如果他没有,你至少给人返回一个空数组,就能不能想走?
30:01
就这能不能相等?首先说啊,咱们一点点来。就是仓库当中这个计算使用这块一定要想懂啊,你看就是这行语句的前提是啥,是服务器的数据已经回来了。这写一下,就这一块呢,就是说如果。服务器的数据回来了,没问题。那它是一个什么?是一个数组。OK吧,那如果呢,假如呢,假如网络就是假如。网络不给力。或者说你根本就没有网,没有网络。OK吗?啊,虽然这种现象可能说出现频率比较低,但是你也要想到。对吧,这假如写错了啊,应该是这个假如,假如,哎,假如,对不?假如网络不给力或者没有网,你像他反问的是啥,它返回了,就这行语句应该返回的啥,应该返回的是安find,为啥?因为空对象的身上,假如仓库的这个数据没有被服务器的数据替代,你是个空对象。
31:12
你空对象打点固力,等于的是按底饭完,你那边还变立的,那不就坏了。安底范怎么可能变利?它至少是个数组,能变利,就这能相等不?对不,所以说你一定要注意,就这里面的计算的这个新的属性的属性值,你至少。给人家来一个数组。OK吧,这样以防万一,虽然咱不加现在也可以,但是以后如果再出现这种现象,你得知道怎么回事。OK,不以防万一。OK吧,好嘞,这个是咱们产品。
我来说两句