060-尚硅谷-尚品汇-产品详情数据获取

好嘞，各位同学。那咱们呢，刚刚做了一件事什么事啊，就是进行了路由的跳转，以及传参以及烧盖角呢，咱们把滚动条的这个滚动行为啊也说了一下。那到现在为止啊，就相当于咱们的静态组件是不是已经有了，那你说接下来干什么。对不？静态组件有了，路由有了，该传的参也传了，你说接下来干什么？那你是不是得向服务器发请求啊？对不？你的底详情模块是不是得向服务器发请求，把这里面假的数据是不是要替换为服务器真实的数据？第二个干啥，是不是写voe叉？对，不往仓库里面放数据。那接下来再干什么？那你的组件是不是在仓库要数据，是不是展示数据完再写这些动态的业务逻辑。对不？那所以说来看这。

那所以说咱们接下来第二步干啥，你第二步来看这，当然这里面咱们也讲一讲，叫做滚动行为，哎滚动行为对不？那第二步干什么，写咱们的API吗。对不就是咱们的请求的啥请求的接口。对吧。那咱们找到咱们的哪个文件夹呢？找到咱们的这个。APIAPI下index。那所以说咱们这又要写接口了。那这个呢，咱们写一下这个是啥，这个是获取。产品详情信息的接口。对不，那咱们看一下接口啊，咱们得先看一下接口。找一下这个API。最后呢，咱们不是登录，也不是三级分类，也不是搜索，应该是商商呃商获取商品详情。

那咱们先看请求的地址是不是在这儿呢？你看吧，地址当中他都让你带ID了。对不，所以这个是请求的地址。这儿呢，老师给它放在这儿。之后咱们再看啊，他还需要有什么请求的方式。是盖的。对吧，就是请求的方式。是cat。那以及再看一下子啊。参数要带的谁带的是产品的idd，而且是必须要带在哪呢？是不是在这就带？对不，那所以说咱们得写接这个接口那来嘛。Export。比如咱们叫REQ叫叫什么叫产品的，叫cat啊，或叫good info吧，叫good词info。产品的信息。那你一定要注意一件事，将来调用这个函数的时候，要不要穿参？

老师问你将来要发请求了，一定要用这个函数，要不要传参，你都写到这儿，你该应该提前能想到了。就是将来你一定要这个函数。你要向福奇发请求，你要不要代餐？要不带的谁带的，是不是就是这个SKUID，是不是这个产品的ID。对不，那你就要发请求呗，就是request request函数就相当于as加小块发请求吗？你传对象呗。地址是谁？那地址那不就是他吗？对不把咱们的这个杠API给它去掉。对不，因为咱们被子有LL带，那这块呢，你是不是得带着这个SQID是不是上去。对不，那这不就完事了吗？对不？那当然你还得写一个，就是method，什么请求为get。

就这个请求的这个函数封装能不能看懂，能吧。相当于封装了一个函数获取产品的信息。你需要传参的的ID。对不？那一旦ID是不是发请求，盖的请求是不是捞过去了，对不。好，那写完了，请求老师，你接下来干什么？你说请求函数小号这个我看着是不是看没有一差。你微微一插仓库，你是不是要捞数据获取啥获取。获取咱们的这个产品详情信息。对不？那所以说咱们得写VO了，那你要注意detail是不是又属于一个新的模块。看这detail是不是属于一个新的模块。那所以说咱们的vex轴。还需要再新增一个模块，就新增一个小仓库叫谁叫detail？因为现在的咱们的VIVO叉有几个小仓库有俩你看嘛。

一个是服务谁的home，一个是服务色的，所以咱们detail也需要有一个。对不，那所以说这里咱们再新建一个文件叫做deal detail.js。那这个小仓库里面也是一样，是不是还是这四件套。State。对不？Cost。Mutation。对不，那以及cost一个action。对吧，以及comes的一个叫gets。对不，那以及你需要对外暴露。Export default，暴露谁暴露一个对象state？Action。对不mus。那老师问你完事了吗？我这个小仓库洗完之后完事了吗？你一定要记住啊，你这个底碳模块搞完之后别忘记需要。需要咋的，需要回到大仓库当中。

进行合并的。对不，所以说你写完detail这个小仓库，你需要回到index当中，你把这个detail也要进行注入。对不，那所以说咱们引一下呗，In part。底。Pile。Deal for wrong，谁是不是咱们的点杠？Deal，这不就完事了吗？但别忘记啊，这里是不是要注册一下？Deil没提示，让老师给他关了，重新再给它打开一下。对不？那你说仓库也有了，我问你，你说你接下来干什么。那你接下来仓库当中是不是得发请求捞数据？对不对。哎，对不对，给个护印。对不对，就是现在相当于接口写好了，VI叉也有了，那你是不是得派发action捞数据，展示数据，对不对，就这点东西。

对不对对的，给老师扣个六。就是你现在接口已经有了。VV叉也准备好了，相应的模块的VV差也准备好了，你是不是要发请求向服务器捞叨数据完了再给仓库里面存一下，将来组件一用是不是就完事了？所以说老师以前说过。你会发现整个项目下来最简单的就是就是VIVO叉。你会发现他就是这个套路，没别的套路。对不，那所以说咱来呗。那这一块呢，咱就直接写了啊，那你在哪，你得派发action是不是捞数，你捞数语是不是得用那个函数来嘛。对吧？In part还记不记得那玩意叫re EQ？叫叫什么叫good info from API。那是不是又是同样的套路啊？对对不对，是不是又是同样的套路。但是你别忘了，这个接口是不是要带个ID过去。对不，那所以咱们一定来看这。

那这个是什么，是获取，咱们就是获取产品信息的啊action。咱们写个吧，咱就叫get。Good。音。对。那你要发请求，你就得咋的wa谁re q good。Ino老师问你要不要代餐？就是将来呀，你这个接口要向服务器要某一个产品的详情的时候，要不要带ID。要么，那你说从何而来？这个套路应该熟悉了。是不是当用户派发个action的时候，是不是触发他的时候，给他传一个ID。对不？所以这块还是拖了套路，你还得有谁坑他？对不，那这块有个谁叫SKUID对不？那你需要带个SKUID的。这块一定要给我理解啊，都已经写了N遍了，这玩意你该懂了，这玩意是什么时候才有？

当用户第一次派的时候，派发的时候就是你点某一个产品。一跳过去是不是能拿到那个产品的ID完你第一次PA派发的时候带ID要过去的。对不，那你A位在等什么？等这个promise返回的数据结果，成功的结果，那你这会就来写think。对不，那这块你是不是得接收服务器返回的结果啊。对不？哎，对不对。对吧，完了接下来还得判断，这是等如果你的result点扣的，你看这熟不熟悉result.code的。COD等等于200，你要干什么？你是不是要提交？Mutation修改state对不？那所以说来看这，那你该怎么办？Commit。提交这个action的名字叫啥呢？咱们就叫个，我们有些人叫jet get。Good。Ino。

对，不提交给谁，应该是result.date。对不，那当然你这个纽是没有的，没有怎么办？走，你是不是在这再来一个。对不，里面有谁有state，因为你要修改state吗？那这个叫什么？叫做呃I，叫做good info。对不，那这里面的代里面你必然对外我写就是倍点good in等于in啊，叫good in。但是你一定要注意，初始的这个good info到底是什么，你能瞎写吗？就是咱stay的，现在仓库当中这个stay还没有good info这个属性呢，但是你要注意它到底是数组还是对象，我问你能瞎写吗？能瞎写吗？不能吧，你得看啥，你得看服务器给你返回那个数据是什么。所以咱们看一下子看看这个接口。你看它返回的是什么，对，返回的是一个什么，是一个对象，看这。这能看见吧？result.day的访问是不是一个对象？

所以说咱们这的初始值，为什么初始值为一个空对象，这不就完事了。哎，对不对。这能理解吗？这儿能不能理解，给老师个回音？就这块儿咱天天写，天天写，你对这应该有感觉，你再看的时候，你应该非常清晰了。你就就是你，别的可以放你这儿，不能再犯糊涂了。这话你闭眼就当我写是。对不但是老师问你说仓库当中现在有这个数据吗。仓库当中有没有这个数据，还没有的，为啥？因为你还没有派发action。咱刷个新，你自己看一下子看这。啊，这是咱们有个报错呀。Type NAV啊，应该是咱们引进来的这个组件。就是这个这个这个这个这个叫叫叫叫叫叫迪泰尔。底这玩意也引入了商品费，但是这个T是小写啊。

你这块一定要注意一件事什么事，就是咱们仓库当中现在有数据吗？没有呢，你看嘛。你看嘛，咱仓库当中现在已经是有detail了，你看是不是有detail了，但是detail当中这是空对象。为啥？因为你没有派发action。你没有派发action，你怎么捞数据，怎么往仓库进行填充。那所以说的问题是什么时候派发action？什么时候派发action来告诉老师？当用户点击这个详情，我只要从色跳转到detail，你是不是就得捞详情页的数据？所以说应该是在底组件挂载完毕之后，你就应该派发action。对不对。诶，对不对，对吧，那所以说咱们找到谁找到咱们的这个detail组件。OK吧，Detail组件呢，老师呢，一会呢，会详细的去介绍这几个文件夹，咱们也会说，但是index它是detail详情组件。

OK，不老师呢，先把它先给它折上。也就是说，当你一挂载的时候，Monkey。那你就应该派发个action，而且还要咋的呀，是不是带那个ID。对不，所以说这边应该是什么派发。Action。获取产品详情的啥信息？对不，那就是这点Dollar。到点。第一。PAC dispatch叫啥叫K？Good info老师问你对吗？老师，你这么写对吗？你这么写不对啊，你派发action的时候别忘记了，你还要捎带角给人带个啥，就把产品的ID也要带。

对不，那ID在哪呢？ID是不是在路由当中呢？而且是帕斯参数。所以在这你要怎么解它，还要穿个ID，就是this.dollar root.para.skuid，因为我站位那玩意不就叫sqidd吗？所以这回咱们可以看一下老师给你刷一个新刷新。咱们先别说别的，你先看一下仓库当中有没有数据。看这。咱们瞄一眼，你看色当中来刷新啊刷新走走，你看下色当中的这个这个这个底态当中有没有数据没有。对不，那没有是为什么呢？咱们看一下请求，请求有没有发刷新。呃，安底范。安底饭是为什么呢？也就是说这个ID没拿到啊。对吧，我看一下子，我看一下定义路由的时候，我站位的那个名字叫啥来着啊，我看一下子，我这样先打印一下吧。

这个ID名字可能是大小写出现了问题，咱们看一下啊，我先打印一下。console.log this.dollar呃，root.paras我看一下是大写还是小写的。看一下，我走。啊，小写的叫SKUID对不？所以这块要注意是小写的。所以说你自己这回咱们再回首看一下，能不能捞到咱们的服务器的数据，叫SKU小写的ID，这是小写的。对不，所以说这回你看一下，咱们先看请求发没发出去。发了吧，那以及咱们看仓库当中有没有数据。来看这有没有。Detail详情当中是不是已经有产品的信息了？是不是就拉到数据就到这儿，有没有问题。老师问一下，就现在的这些操作，你不应该打班了，就跟以前是一模一样的了。OK吗？那剩下的是啥？是不是就是展示数据这些东西了？

对不？R。