17. 尚硅谷_mpVue_Vuex综合练习，电影详情页完成.avi原创

好来，咱们继续上课，那么上节课呢，我们把哎使用FLY这个库呢，进行了一次前后台的交互，相当于哎主要是练习呢，在小程序里面可以使用第三方的加库，哎去进行前后台交互，那么这节课呢，我们去把它对应的一个那个详情页呢，我们去写一写啊，也就是我们最后一个页面，那这个时候呢，我们来到这个。我们这个配置下边，然后呢，我再去创建一个文件，哎这呢应该叫它哎D了好文件夹，然后呢，还是一样的套路，哎命点GS。再去整一个，这呢叫它movie detail，走，你好，那这个时候呢，在这儿还是别忘了import view from viewport，哎，那这个东西呢，其实我们也。

你可以干嘛呢，把它贴过来，哎，贴过来呢，我们只需要是不是在这儿画一下这个就行了啊那这呢是别跳好，那然后呢，把这个人进来。把这个拿过来，前面换成什么小写就区分一下就可以，最后挂载它没有问题。写完这些呢，把这个关掉好，那在这儿呢，首先我们还是得去整一个什么，它对应的一个配置文件，命Jason来拎过来，OK。把这个呢复制一份拎过来，在这呢，我们叫它电影详情。哎，电影详情，那把基本的这些东西写完了以后呢，呃，我可以先把这个东西呢，提到最上面，哎，提到最上边，那这个时候呢，打。在这我们是不是还没写好复制一份，那这呢，应该是哎，Movie detail下边的他。

好，想要看效果的话，怎么办呢？把这些呢停掉停掉，然后呢，我们重新去执行一下n PM start。让他去编译一下。好，那这个时候其实已经出来了，因为啥，因为我在这儿是不是没有写任何的内容啊，你看我随便写一个重新编译这个内容是不是就有了，没有问题，那接下来呢，我们需要去写什么呢？去写一下它那个结构，哎结构我们看看，就拿这个霸王别姬好，那霸王别姬的话，那首先它是不是应该有一个图片。哎，我呢，把这个往这边拖一下。嗯，在这呢，我们应该是把这个去掉它，要不然它有这个背景色，好，那打开这个，首先在这个上面，这是不是应该有一个图片啊。

然后呢，图片这呢，我们来个static下边image。Image下边index下边的car.gpg同样呢，我们还是去做一个这个代表，那接下来再看这是一部分对吧，这是一部分，哎，最后呢，这有个button，哎，把这些看完以后呢，我们可以在这边去写，下边呢，首先有个东西，它是不就叫什么霸二王别姬啊。那再往下呢，它其实有三部分，那这个时候呢，我可以来个这个STEM啊，有一个叫评分。咔咔复制两份，那在这儿呢，哎，这个呢叫导演再往下，哎，主演，那接下来最后在这呢，是不是应该有一个button呀，啊，我这就写一个，我要观影。好，这些结构写完了，我们再去整一下它这个容器的类class，那在这呢，我们叫它movie，哎，这是详情的。

哎，这应该是用什么大写container。没问题吧，好，那么接下来我们还要整的是什么呢？在这个P标签这来class，哎，我们叫它movie name，因为上面那个image我可以直接是不是找到它啊，那就不写了，那再往下这class，哎，我们叫它。Detail content吧，啊，详情的内容最后是一个button对吧？好，我这样定义完以后，咱们接下来是不是要去写这个样式，那其实这些样式倒是不难啊，不难，因为之前呢，我们已经写过一遍了，所以呢，没有必要去做一些呃，重复却没有意义的事情啊，在这儿呢，我直接把我们之前的这个样式呢，干嘛我给拿过来，好，那这个时候呢，我填到这一块，我们来看一下。

那这样的话，这个样式是不是已经出来了呀？啊，已经出来了，重点是啥？我们要拿对应的数据，那么最后呢，我再带大家去列一下这个VX啊，为什么说要列一下VX呢？你想我们那个数组在哪？数组不在这儿，它是不应该在movies里边，哎，在movies里边是不是在这一块，那这一块的数据如何？呃，首先我们知道它是一个数组，对吧。那它是一个数组，那当我在上一个页面，你点击是不是要跳转到哪详情页吧，那跳转到详情页，我点击的时候肯定能知道一个东西叫下标。对不？哎，下标肯定没问题，那知道了下标以后，但是我在这个详情页，你是不是还得把整个数组给我才对啊，哎，整个数组给我才对，那这个时候呢，我们可以考虑什么，把这个东西，哎通过VX去传递，哎，去共享这个数组，好，那这是个store对象，首先state，这我们是不是应该去初始化一个，比如说我们叫它movier上来是不是也为空啊？

哎，也为空，然后呢，我在这儿去写一个什么。Actions，那这呢，我们叫它，哎，Get没问题，那里边我先把这个呢，哎给它写上，这是commit对吧？好，那接下来我们去倒着去推，哎，倒着去推。Movies，这我是不是应该把这个存到我们的VIVO X？对吧，什么时候从。那是不是拿到这个数组再去做，哎，所以呢，在这儿我们可以这样写this.dollar负store.pach对吧？首先在这儿呢，我们应该去分发action的话，是不是分发它。

没有问题，那这一次是不是应该把数据送过去，就是这个数组吧？对吧，哎，那个数组给了action之后呢，Action在这，哎，那也就是意味着它是不是有第二个参数呀。是不是能拿到。接下来他要去干嘛，去commit对吧，那commit在这儿呢？哎哎，这不应该是他啊，这是吧，又要去写一个。什么呀？哎，又要去写一个那个mutation的类型啊，那我在这儿去写了，呃，Movies下划线，好，那这个东西呢，我们倒着来写的话是这样的，我是不是应该把这个放到这儿，然后呢，在map，呃，这个mutation type里边，把这个拎过来，把这个拿过来啊，那这是不是应该我们去换成什么？哎，换成一个小写呀。

好，那在这commit之后，你还得干嘛呢？是不是把这个数数组送给谁啊，送给我们的。Mutation，哎，那也就是数组这一块的话，我也应该有一个。啊，在mutation这儿的话，是不是也应该有一个方法，那这个方法呢，在这儿我应该去取一下叫。他们是不是应该是对应的。啊，然后呢，在这呢，有一个data，那在这我们应该是不是去修改的是moverray等于谁呢？等于这个data就完了。对吧，那现在我们可以来测一下，我去测一个东西conso log这个哎，State来，那呃，然后呢，我们还需要改什么呢，我们要让这个movies这个页面是不是先加载才对啊，哎，它先加载才对，好走你。

上来没有问题，那这个页面我们是不是已经加载了，那这个state现在我们看看应该是哪一个呢。是不是就是它这不是我们要的吗？哎，这个数组呢，是不是已都已经过来了，好state，哎，现在已经我们已经把数据是不是存放到哪了，存放到VX里面了。那我这存进去，你说在电影的详情页能不能取出来？嗯。可以吧，好，那能取出来那就没有太大的问题了，来到电影详情页，要取的话，首先。Port，你是不是要去映射一个状态，那这个时候呢，我们把哎必须的东西拿过来，这儿呢是map state，然后呢，我们在这个UT下边去干嘛去映射。

去映射什么，去映射我们刚刚从入的这个什么呀？哎，从入的这个状态值，那在这呢，我们去写一下，呃，我们刚刚那个状态叫什么了？来我还得去看一下是不是叫movier。把它拎过来，那一旦映射完了以后，我们详情页是不是有它了。还有他了，现在唯一缺的是啥，你这跳转的时候，你要给我整一个东西过来。那at keep走，你这呢，是to move。好，那在这我能不能传一个数据过去呢？我们说过在VGS里边，那这些事件，哎，这些事件的它的回调呢，我们。

可以不用加括号调用，但是呢，当我们需要传参的时候，是不是也可以加括号调用啊，那这个时候是不是可以把这个下标呢传过去啊，OK，那在这呢，我们还是去定义一下什么，定义一下我们这个方法在这呢叫methods，好，这是我们的方法，那在这呢，是不是有一个下标啊。诶，这个方法应该是这样，那接下来去跳转的话，Navy，呃，G g two对吧，那在这儿我们整一个URL，这要去pages，哎，Movie。Detail下面。Mean问号index等于什么？加上一个index是不是就可以啊？好，那这一传递到这儿，哎，这些套路呢，我们都整过，怎么去接收它呢？比方mount，那在这儿呢，我们还是不确定的话，打印一个东西叫race，对吧？来，我们来看霸王别姬。

走，你出来去找一个Dollar服map的东西，在它下边有一个东西叫query。对吧，所以呢，在这儿我能拿到一个东西啊，this.index等于什么？我们只不过是去给他干嘛，是不是去写化一下，或者说在这我们就不动它了，因为这次里边有，现在呢，我们需要去做一件事情，Data，还是去给它初始化一个，哎，在这呢，我们叫它movie detail。它本身是一个哎空对象，哎data不应该这样写，还没写完对吧？好，那在这儿this也有了，那保险起见呢，我们在这个下边去做一件事情，This点。

Movie detail等于什么？This点哎，数组我们有了，再找到对应的这个map。下边的点index是不是就可以啊。哎，那我们测一个东西吧，保险起见点。去打印一下这个，看看是不是一个对象。来霸王别姬走一下，看一下，这不这个对象吗？啊，没有问题啊，没有问题，那这些导演啊什么这不都有吗？那剩下的内容呢，其实就是我们往里边去干嘛，哎，剩下内容就是往里边去填充，去填充了，首先这个图片这儿不能写死，那这个呢，我们叫它什么叫movie。

Detail，哎，点image下边的large large，好，那这个东西呢，加个冒号，这不是我们刚写过的东西吗？嗯，还有这个，那这个东西呢，我们可以去哪去拿呢？去上边是不是去这儿也能拿，这是我们那个。名字。评分啊，评分的话，我们呃，之前也也整过，也整过来找一下。是吧，应该是他。应该是他，哎，你包括导演这一块，导演这一块我们也整了啊，待会儿呢，我们去换一个东西就行。来，走你。这导演是不是差一个主演啊，那主演这个东西呢，大家自己可以去找一下啊，他主演呢一共有三个，我呢就用这种方式，哎，直接写过来，中间加了一个空格，那在这呢，我们就不浪费时间了，只不过是剩下的，我们是不是要把这个item换成我们这个对象啊，OK，那这个时候我们来看一下。

刷新霸王别姬走你陈凯歌陈凯歌张国荣张丰毅，哎，那这样写的话呢，就没有什么问题了，这个我要观影呢，其实是一个摆设啊，在这儿呢，我们没有太大的作用啊，你真正要观影，你是不可能在小程序上面去看的啊，因为它的体积本身就比较小，本身就比较小，好那这样的话呢，哎就没啥问题了，那到此为止呢，我们最后电影详情这个页面呢，也写完了，也写完了，好那我们本节课的内容呢，就讲到这儿。