037-尚硅谷-尚品汇-获取floor组件mock数据‘

好了，各位同学，那咱们呢，刚刚啊是把这个home首页当中的这个list container这个组件当中的轮播图，哎，终于给他搞完毕了。所以说啊，咱们最终选择的解决方案是什么呢？是watch结合nice t解决的，好吧。那当然，那home首页当中，除了这儿咱们需要搞搞还有一个地儿，那这里老师说说。像这里啊，那这些呢，都是假的数据，OK吧，那以及这儿也是没有数据的，那这呢，其实就是一些图片也没有什么数据，但是底下的这里。家用电器，这里是需要有数据的。啊是动态的，因为昨天啊，咱们默数据的时候就默了两个地方，一个是这里面的banner的数据，咱有了就默出来了，对不？那以及还有一个就是flower flower这个组件。

这里也是有数据的。咱们看一下咱们上线的这个项目，你看这吗？这不就是咱那个轮播图嘛，这是没问题的，以及底下的这里你看啊，这是不是也有，是不是也有数据。OK吧，这叫家用电器对不？哎，这个叫什么叫手机通讯，这里也都是有数据的。对吧，那所以说咱们接下来要开发flower。组建了。对，不，但是在开发flower组件之前，有一个小知识点咱们需要说说。哎，那这块老师先给你标记一下，这是第二个对吧，第二个知识点呢，咱们要搞什么，就是开发咱们的flower组件。对，不但是在讲flower之前啊，有一个细节的地儿咱要说说。虽然说啊，还是回到咱们刚刚的这个代码当中，老师问你们。在VE当中获取到我们的节点，能这么写吗？

你看这是咱们很早很早以前学DOM的操作，就是咱们以前获取DOM的节点没问题，是通过DOM获取的，但是您已经学vuee了，你获取到我们还能这么玩的吗？就别这么玩了。咱用什么呢？用ref。啊，想想啊，REF咱学没学学过吧，是不是或相当于打ID获取到真实到。那所以说啊，咱们给这个容器标签就是这个这个叫叫叫叫什么swap container，给他打一个ref就是它。对不就是这个swa container，那这块呢，咱别叫ID了，叫啥叫ref。那获取到呢，咱们用什么呢，就别再用到了。OK，不，哎，咱用什么用this点儿Dollar re FS点。这个if的名字叫mywaper，用它去获取到了就别再用do操作获取到。

OK不啊好嘞，那这个小细节咱也说一下，那当然效果还是一样的。好嘞。那咱接下来啊，得开发咱们的flower组件了，老师先问一个问题。你眼睛看见的这两个区域是不是都是flower组件是不是？可能啊，咱们拆分组建的时间有点长了，但是你自己再回想一下。就是这一部分区域是不是用floor组件搞的。那底下的这一部分区是不是也是用劳组件搞的？对不，因为咱们应该知道组件是可以复用的，什么叫复用，可以多次使用。而且它的floor组件是在home当中，咱们先看一下子走。在home首页当中，咱是不是用了两次flower组件？对不，所以说是floor组件在干啥，在复用。

对不好嘞。那接下来啊，那你就想想。又是曾经的那几步骤，你看嘛。静态组件已经有了，就是静态已经有了，你要干啥？那你是不是得写API？你是不是得向服务器发请求，写完API写V叉的三连环，写完三连环是不是组建捞数据，展示数据？对不对。其实你琢磨琢磨，以后工作了，也经常是这样的操作。什么操作呢？诶静态搞完之后要干啥，要发请求，你发请求你不就得写API吗。那写完API干什么？仓库是不是三连环？仓库存储数据，仓库存储完数据组建捞，捞完咋的是不是展示？对吧，好嘞。那咱们呢，先去写咱们的API，那这块老师都给它折上了，都给它折上了，那咱们得先写写咱们的API了。

对不，所以这里咱们得搞搞了，那这块咱写一下，这是啥是获取。Flower组建的数据。那也是一样，你也得对外暴露一个函数，返回的是一个promise实例，对不？Export。Cost，咱起个名吧，叫re EQ EQ是请求，请求什么请求flower的列表数据list。对吧，等于什么？那不就是一个箭头函数，那老师问你，咱将来这个as设这用代参吗？不用，你就是发请求，发盖的请求，唠叨数据就行了，你没有代餐。没带参，那咱这里就不需要写任何东西了，就是调这个函数的时候，你不需要传任何实参。对不，那所以说咱来嘛，叫做mor阿贾克斯，一定要注意，咱这个floor数据也是mor的数据，也得用这个默的这个as。对不？第二谁第二该请求谁，是不是请求咱们的杠。

Flower flower。对不？所以说还是以前的套路，所以说你最终你会发现最简单的无非就是唯一差。好，那你写完了这个请求之后，老师问你干啥，你是不是得写仓库三连环了？对不？这回你闭着眼睛都知道你要接下来干啥，你请求已经准备好了，你是不是得发请求？三连环仓库是不是存储数据组先是不是捞数据，对不？就是这回老师就先不到组员，那咱们先把仓库先给他搞好。对不？那接下来找谁找咱们的仓库，那仓库你是找home还是找色，那当然现在是home模块，那你得找谁找home。那后这里你看这不又是这个三连环吗。对不啊，当然咱gets一直没用。对不，那gets咱们应该知道是啥，是不是叫计算属性，咱今天会用啊。它到底怎么用，咱们今天会说对不？你看是不是又是这个三连环对不？那你发请求是不是得用这个函数，你来嘛来呗，叫r EQ flower a list。

对不？那接下来你是不是就得写咱们的action？对不，咱来呗，这是干啥？是不获取咱们的flower的数据。对不，那咱们叫什么，就叫做get。Flower谁list？对不？哎，小透风，那当然你将来是不是得提交，提交这里面你是不是得commit，对吧，Co MIT commit。对不，那以及你是不是得发请求那呃，请求那就不A，为了等待它返回的结果嘛，叫做re EQ floor list。对不对？那有了a wait，你就得有谁，Think asyn s。对，不，那等于什么，你接收的是不是就是它返回的结果？A，对不对？就现在老师再写三连环，你都不应该打崩了。

OK吗？O，不OK，就是现在老师再写三连话你都不应该打分了。对不？那咱们看看这个名字对不对，对啊，叫r EQ floor list没有少盖。Iql list。所以说以后再写三连环，你连打啵都不能打崩了。OK吗？那你捞到数据之后干啥？老师问你捞到数据之后干啥？啊，List对吧，这个list。对不，那这块咱也改一下子，这就叫对不那这块也叫list。对不？所以说以后再写这个三连环，你连打啵都不应该打崩了。OK吗？那你捞到的数据你要干啥？你是不是如果你的造的点扣的等等于200，一定要注意。咱们的服务器返回的扣的都是200代表成功，那如果说你工作当中是三百四百五百，你得写别的。

对不，那如果成功干什么，是不是提交MU？提交MU I mut。对吧，MU写一下叫做muon对不。叫提交。对不？所以说你会发现这不就是三联完吗？这怎么整？Commit提交提交谁提交？这个名字咱一般都大写叫做get floor flower list，对不，提交的是谁？那不就是result.date。A，对不对？对吧，那你写完它之后，你得写谁，你得写mut呢。对不，那这个名字咱复制一下子CTRLC，那这块老师给它折上了，你在这儿你是不是得写咱的上了。对不，他有什么，有state和谁和flower list，当然这个变形你叫什么东西。因为这不就是行参吗？哎，老师你这是不是就是行参。

啊，有的同学说36行例子没改没事儿。就算将来崩了，你回手再找，不赶趟吗？老师就不敢？O不OK。OK吧，那你看这那你这块是不是得修改state当中仓库的这个数据啊，那你这个数据能瞎写吗？你不能瞎写，你得看一下服务器的数据是什么。你看咱们当年写的这个flower点介词，你看它是个啥，是个数组，那你说将来它返回的是一个数组，就是仓库当中你得准备一个数组。这儿能不能懂。也就是说你仓库当中的那个state的数据格式，你并不是说你想写什么就写什么。不是你随心所欲的，你得看什么，你得看一下服务器最终返回的是什么。返回的是不是一个数组？那所以说你在这儿应该写的，是不是应该写一个叫贝。哎，点flower list，为什么为flower list，但是你要注意你仓库当中是得有。

对不，这是干啥，这个是不是咱们flower组建的数据。对不，那这个地儿叫flower list，那初始值应该是个啥？是不是应该是一个空数组？对不？哎，老师问你对不对。老师最后再说一遍，就是仓库当中切记。仓库当中的state的数据格式。你别给我就是你别瞎写。虎形。乱写，你别给我这么搞。OK吗？你一定要切记，数据的格式取决于谁，数据的格式取决于服务器返回的数据。OK吧，好嘞，那现在老师问你一个问题啊，咱们仓库当中现在有没有这个这个数据有没有，服务器当中这个数据有没有。

告诉老师。就是现在老师还没运行呢啊。就现在假如说老师运营起来，仓库当中这个floor list有没有服务器的数据，有还是没有。就这样，你学了这么多天了，你得知道有还是没有啊。没有吧，为啥？因为你根本没有派发一个action。你没有X，你怎么触发这个函数，那你怎么三连环。这能懂不？所以说咱们得触发这个action，但是接下来的问题是，你这个仓库当中这个action在哪触发？对不，所以说咱们接下来这个2.1 2.1，接下来一个问题就是这个get。Flower list，这个action在哪里出发？哪里出发？在哪里住？

哎，有的同学说是在flower，你这就不对了，你看这啊。咱们先看它的一个数据结构，你看这儿。你看这啊，它是一个数组，数组里面有两条数据，你看这。就是这条数据啊，它是一个数组，数组里面有两条数据在暗示着你什么，暗示着你将来这两个floor组件，你得是V-for遍历出来的。这能懂不？这个能不能懂。比如说你这条数据是一个数组，数组里面有两个对象，这两个对象说白了就是这两个组件要用的数据。对不对。所以说呀，你不能在哪儿dispatch你看。老师给你找的。你看这两个flower组件是在是在home组件当中在用，因为是属于home组件的子组件。你不能在flower组件里面去发请求，为啥？如果你发了，你怎么给我造出来两个flower组件？

就算造出来了你的数据，你怎么给他俩，每人都给他分呢？就这能不？就这能不能懂。你看你这一定要想明白啊，数据是什么呀，是一个数组。数组里面有两个对象，这两个对象分别是给这两个flower组件的数据。OK吗？那如果说你在flower组件内部发请求，你怎么V-for便列出两个flower组件？对不，你没办法便利。这能懂不能懂的，给老师扣一个六，那可能有的同学刚起来还不知道老师在说啥呢，我再说一遍。也就是说你这个请求啊，你不能在哪，你不能在floor组件内部去发。如果你在它内部去发，你没办法V杠号便列出两个floor组件。

这能懂不，这能懂不可以吧，所以说你这个发请求应该在哪发，你应该在咱们的后路由组件当中去发。对不，拿到数据之后，V-for便利那个数组，数组里面有两个元素嘛，便离这里这个floor组件，那不就出现俩了吗。完剩下的活给他俩咋的？是不是传递自己想要的数据就行了？对不，所以这块呢，一定一定要切记呀。就是这个get a floor list，这个action在哪里发？是需要在咱们的home组件当中发的是。需要在home路由组件当中发的。这块的有一说一，就这块儿的能不能想走，能想走的给老师扣一个六。你千万别在floor组件内部去发，如果你内部去发，没办法微杠放。

OK吧，哎，所以说啊，这一定要注意，是在home路由组件当中去发的，不能。在flower组件内部，哎，内部发这个action。Action，对不？哎，因为啥，因为我们需要V-for便利啊，便利flower组件。OK吧，好嘞。那所以说啊，咱们回到home路由组件这来，那咱就派发这个action。那什么时候派发，很简单。那一定要注意啊，这个flower和home是什么关系？是父子关系。对不？Home和flower是父子关系啊，那在哪发？那就在咱们的home路由组件当中的monitor当中发不就行了吗？对不I monkey。走，你。

那这里面呢，老师呢，给你来一个这是在干什么，是不是在派发action AC填问action对不干什么，是不是获取。Flower。组建的啥数据？对不，你来嘛。这是点Dollar。Store第二，第一。Patch这个action叫什么？是不是叫做get？Flower，谁list，你这回再看一下子仓库当中有没有数据？找你。咱们瞄一眼，你看这回是不是报错了，叫做呃，Get flower例子，他不认识，你看这个错误啊，你看他叫做他不认识这个get flower例子，那说明咱的action的名字写错。那名字写错了，你回仓库当中再瞄一眼。走。找找一下嘛，叫做get flower list对不。

啊，那这回你再看一下刷新走，你看仓库当中有没有谁，有没有咱们的这个flower的这个数据有没有，你自己看有没有有吧。那flower list这是不是已经有了，而且是个数组，数组里面有两个元素？对不？哎，所以说咱们已经能捞到谁捞到服务器的数据。对不，哎，就到这有没有问题，没问题吧。没问题的，给老师扣一个一，而且要注意当前是在home路由组件当中，是在home路由组件当中。对不哎，对不对，对吧，那接下来你要干什么，但是一定要注意一件事，什么事，就是这个flower组件和这个home组件是什么关系，是父子关系。你先把这先给我想明白。也就是说咱们这块是属于咱们的home路由组件，而flower它只是home路由组件当中的一个子组件，只不过在复用用两次。

那咱们已经有数据了，那你是不是就可以让home是不是拿到数据。对不，所以说你看这不有同样的套路，对不也。谁map？Stay for wrong will。对不，你这不是同样的这个这个套路没有以上没有以差。对不？那接下来咱们是不是就可以这么computed，对不？第二点点map state，对不，那这块咱们叫叫flower list，当然你叫别的也行，等于什么state state是大的仓库，它应该是state大仓库下的home的小仓库的这个flower list。对不？那写到这儿，你先别着急忙慌的去写，写写东西，你先看一下子你的组件的身上有没有这个数据。

找谁？你是不是应该找home？来找一下home，这不就home，你看home的身上有没有这个数据，有吧。有没有，有吧。老师在告诉你们，你们自己在练的时候，应该是按照什么样步骤去来，要有节奏感。你们别连连连连连运行都不运行，就是从头到尾写一遍，运行起来崩了。所以说自己写一点看一点，写一点看着你别学老师，你看老师虽然说。我不用看，但是你看没发现我讲课的时候每次都要看吗？所以你们也要看。OK吗？确保你已做的已经是OK的。那家伙有的时候都写完了，最后诶老师这怎么回事。就走一步看一步，那咱们后录由组件有没有这个数据，有，那有就可以怎么办来看这你这个flower组件就没必要写两了，写一个就行了，因为数据已经有了，你就可以怎么的，你就可以V杠号进行便利了。

而这次是咱们人生当中第一次V杠号在谁那用，是不是在这种组件的使用，而且是自定义，自定义标签用。A，对不对？这件事咱以前可能没说过，但是你要注意咱们以前的V杠炮是不是经常在div。在ul在立在这些W3C规定的标签身上是不是用，但是你要注意V杠号可以在自定义。标签的身上使用，因为说白了它不就是一个组件嘛，组件是个什么鬼？它不就是一个自定义标签吗？所以说在自定义标签的身上也是可以用微钢放。OK吗？那所以这块可以怎么办？可以这么办，V-for。对不？咱起个名吧，叫啥叫做flower？

对不，还有谁inex你变了谁？你变了的是不是叫flower list？对不？那当然，你得看一下子你B里的这两个对象身上有没有ID。有没有ID，有吧，那所以你可以怎么办，哎，冒号K。为什么？为的啥ad？对不，那所以咱们看你看现在是不是就有就有啥，就有两个家用电器你看。那数组里面有三，那是不是就三就到这能不能懂，能懂的给老师扣一个六。能不能懂，能懂的给老师扣一个六。也就是说咱们现在这两个flower组件是怎么搞出来，是通过V杠搞出来的。而且老师也做一下笔记。这块呢，老师呢，还真得说一下子二点几，2.2 2.2，这里一定要切记，就是V-for也可以在自定义标签当中使用。

千万别误以为说AV根号只能在力PA标签上，用不是的自定义标签也可以。对，不，但是接下来的问题是什么呢？老师问你们。现在数据在谁？那现在数据是不是在父亲这儿。你看吧，数据是不是在父亲这，是不是在home这，但是老师问你，你数组当中的每一个对象，你是不是要给每一个flower实例，是要送过去。那这里面出现了什么？告诉老师出现了什么。你看啊，现在数据在谁这儿，是不是在后首页，这是不是父亲这。父亲这手握着一个数组，数组当中的每个对象，咱们也拿到了。对不，每一个对象也拿到了，但是在组件内部它是需要这个数据的，出现了什么？是不是出现了父子组件通信？

对不对。你想想啊，你想想现在这个flower数据，将来每一个组件实例，因为有有两个flower组件实例嘛。那第一个flower组件实力是不是用第一个对象，第二个flower组件是不是用第二个对象，对不，这不俩对象吗？那你flower组件是不是得用，你是不是得给人传过去。那这里面就出现了什么，是不是出现了负？子组件通信对不？所以说咱们这里面需要用到谁需要用到。那这里面呢，咱们呢，也回忆一下子二点几，2.3就是组建通信。组建通信的方式有哪些？我告诉你啊，咱们现在学过的应该是有六个，但老师告诉你其实有十几种。在咱们进入后台项目的时候，老师还会再讲一些，但是你现在已经学会了，你得知道最基本的就是prop，而且面试的时候经常会问。

是干什么，是用于。父子组件通信的，我告诉你啊，在面试的时候组建通信它是避免不了的。这块一定要切记，这玩意儿是面试频率非常高的，就是面试频率极高。OK吗？虽然说prop是用于副词组件通信，而且prop的写法咱们应该学过三种。还有谁？还有谁就是Dollar，叫做自定义事件。自定义事件就是谁呢？我不知道你们忘没忘，就到了二。与dollarit。对不，这叫自定义线，可以干什么可以实现？子给父同信。对不？那既然提到自行实验，你还得知道有一个原理，利用的也是自行实验，就是到bus全局。

事件总线。当年宇哥应该给你们画过那个圆型图，画了很长时间，说组件实例的圆形的圆形等于V，就是指向的是Ve.proty原型对象。叫Dollar bus，这玩意儿是个全能的，什么叫全能？任何组件都可以。还有谁？帕萨啊，有的同学提到了pop萨，这里面老师说一下。呃，虽然说pop sub吧，在re当中用的比较多，但是在vouee当中，Vouee当中几乎不用。对不，哎，但是他也算一种，那他是不是也是全能的。对不，还有谁。还有谁咱学了六种，还有谁，哎，对插槽插槽。插槽，咱学了三种。默认插槽，句名插槽和作用域插槽，可能作用域插槽咱现在不会用。对不，那当然最后还有一个是就是VR。对不？啊，所以说这些组件通信啊，将来面试频率极高，你自己这玩意儿一定要往心里边儿去记记，那所以说你看咱现在是不是涉及到负，这是不是在父组件当中呢，是不是要给子组件，每每个每个组件实际是不是要传数据，是不是得通信了，那这个领导谁prop。

那prop你是不是动态传数据，因为prop利用的是啥？利用的不就是属性吗。对不，所以你这边要船你就冒号呗，啥，咱们就叫做flower，对不，为什么为flower。对不，或者咱们这块叫啥，就叫list叫list。List名字叫做list指使啊，是这个对象，老师问你这个名字叫list行不行？或者你叫二哈行不行，行吧，但是你要注意你传过的值，你别给我写错了，对应的数组里面第零号元素和第一号元素这两个对象是不传过去。对不，那所以说你传了，那你子组件这就得咋是不是得收。对不收得用谁，是不是用prop，对不pros prop的写法咱学过三种，最简单的是不是就是这个这个这个这个这个是不是数组的形式。

那当然，你这个名字老师问你写的是栗子的还是flower？你看这儿吗？你传的时候啊，看这你传的时候属性的名叫list，值叫做flower，那你这边接的时候接的是这个属性的名字还是值，是不是名字是在这写的写list。对不，所以咱们找到咱们的这个flower，你看是不是。对不，那所以说咱们看一下你自己一定要注意，别把这个开发者工具当一个残废。一定要用起来，你看在home下，这是不是home home下是不是有两个floor，你看ID都有了吗？而且每一个身上是不是都有个list。对不，你看嘛，每一个组件式是不是都有一个例子。好嘞，这是它就这能不能理解。

就是现在老师讲到这儿能不能理解可以吧。好嘞，老师。