用Vue开发仿旅游站webapp项目总结（上）

该说的话，该表明的上篇已经表明了。谢谢上篇评论区一些同学~ 很鼓励我，不过下下篇估计没了，这篇总结完，下下篇可能就是之后学习路的总结记录啦。

有些话还是要说的

接触vue不久的朋友应该会有收获。此项目也才是萌新做的第二个Vue项目，使用了脚手架工具（vue-cli2.x非3），前辈老手们有时间看的话，有写得不好的地方还请多多指导！~

项目中Vuex的不那么低级的用法

因为这只是总结操作/思路，没一步步讲代码，还是先给个官网的图，这样方便看点：

前提假设，在脚手架中，我们跟路由引入全局的方法一致去在全局中引入Vuex。创建一个文件夹store，在文件夹下创建个index.js脚本。在store/index.js里面写Vuex的一些用法逻辑，然后在入口函数main.js里引入就行了。如下：

先忽略马赛克...

在入口函数main.js中引入：

此时index.js里面的逻辑

拆分

以此项目中为例，随着项目的开发，index.js里的逻辑会越来越复杂，所以选择拆分。

所以，我们建立两个脚本（state.js、mutations.js）来分别存储这两段代码。

然后在index.js中引入：

这样拆分完成，简洁不少。

mapState辅助函数

在项目中，如下图用法去取得state里面city的数据，是不是显稍长了点？

Vuex为我们提供了一个方便的API -> mapState

这样用：

mapState是指，我把State区域里面的公有属性值映射到这个计算属性里。

在这里是：把state里city这个公有属性的值映射到这里的计算属性city里。

这样子的话，就可以把

变成可以直接调用这个计算属性：

...mapState({}/[])这里面可以是数组也可以是对象。是数组的话，那我们就等于直接给计算属性取名city了，和公有属性的名称一样。

是对象的话，我们就可以给计算属性自定义取名。

举个...mapState(对象)的例子：

在当前城市这里也可以改：

这里就是传对象给mapState，等于把公有属性city的值映射到计算属性currentCity里。

此时就可以这样用：

这样子就不用写的那么复杂了。

mapMutations辅助函数

利用Vuex提供的这个API可以简化下列代码：

这样用：

mutations里面是有changeC2()这个函数的（这个命名就....仅当测试，轻喷）。我们想在组件中调用mutations里的这个函数去改变公有数据区域state里的值，运用mapMutations可以这样简洁地在组件中调用。

这什么意思呢？

mutations里有个叫做changeC2这个方法，这里在该组件的methods中是把这个mutations里的changeC2方法映射到了该组件中methods的changeC2方法里。

...mapMutations()参数也是可接收[]/{}的。

还是用...mapMutations(对象写法)好理解一点，如下，做个测试：

（乱入的小姐姐~）

这样子写也是可以的。也更容易理解这里的映射。

Getter、Module

Getter和Module该项目中都没有用到。

Getter

假如我们想根据state的值，通过一些计算得到新的值的话，就可以用getter来提供新的数据，避免数据冗余。它的定义也和computed一样。

getter可以认为是store的计算属性。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter 接受 state 作为其第一个参数，也可以接收其他 getter 作为第二个参数。可以属性访问（store.getters），可以通过方法访问，也有 mapGetters辅助函数（该辅助函数主要也是映射关系，将store中的getter映射到局部组件的计算属性中）。官方文档给的例子也比较好理解，可以自行看文档。

Module

Module的话，看得勉强理解，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块。

当应用变得非常复杂时，可以使用Module避免store对象变得相当臃肿。

我觉得Module具体的应用要在复杂项目中亲自练手过才能熟练，目前不敢轻易下手记录，暂且记一笔。

使用keep-alive优化性能

我们可以在开发者工具 network 的xhr 中看到

每次我们路由切换的时候（从Home组件页面跳转到City组件页面或反之的时候）都要发送ajax请求数据。

这样子就重复请求ajax数据了，因为每次路由切换到一个组件的时候，都要重新执行该组件钩子函数，如果该组件有在mounted钩子里请求ajax的话，就每次路由切换都要执行了。这样性能不好。

此时就可以用vue内置的 keep-alive标签来优化。

在全局根组件App.vue中

代表的是显示当前路由的组件，而在这个外面加个 vue 内置的 keep-alive标签后，就可以实现这样一个功能：

我的路由的内容被加载过一次之后，我的路由中的内容就都放到内存之中，下一次再进这个路由的内容的时候，就只需要从内存里把以前的内容拿出来就可以了。

此时，不管切换多少次路由，都只有两次ajax数据请求了。

因为使用了keep-alive标签，导致有了新的生命周期函数activated（keep-alive组件激活时调用）、deactivated（keep-alive 组件停用时调用）。

之后的路由切换不再请求ajax数据是因为组件内容是从内存取了不会再重新创建了，对应的mounted钩子函数不会再执行了。

但每次切换、页面重新显示的时候，activated钩子会执行。

此时可以利用这个钩子实现一个需求：

当在列表页选择点击了哪个城市后，路由切换回到首页时，首页显示的数据是对应着该城市的数据（意味着ajax只请求该城市对应的Home组件页面的数据）,然后如果在列表页，选择了与原本在Home页相同的城市的话，就不发送ajax请求新数据。

之前，发ajax请求的时候，是直接这样子发：

实际上，在发送ajax请求的时候，应该带一个参数的。带的这个参数应该是 Vuex 中公有的这个数据。也就是当点击哪个城市的时候，这个参数就是对应哪个城市的名称。

怎么在请求中带参数呢？

在请求的连接后面加上 ?=参数数据

如：

在网页上试一试，发送的参数就在下面

实现需求的思路是：

在每一次页面重新显示的时候（activated钩子函数触发）我们判断此时页面上的城市是否和上一次显示的城市相同如果不相同就发送ajax请求

然后我们设置个空字符串 lastCity (当做一个中间缓存值用于判断)

紧接着，当页面挂载完毕的时候，我们给它赋予当前页面的城市数据。

然后在页面更新的时候，判断上一次的 this.lastCity 的值是否等于更新后的 this.city 的值。如果不等于的话，就发送新的ajax请求，请求相应city的数据，如果等于的话就不发送。

此时，通过keep-alive新增的生命周期钩子函数以及lastCity这个缓存值就实现了我们要的功能了。

详情页想记录下来的东西

实现画廊组件功能的主要思路

先看个gif说明此功能啥样：

就这个玩意儿。这个就是画廊。上面有轮播，下面有页码。

因为这不仅仅只有一个页面会用到，可能以后很多页面都会用到，所以写个全局公用的组件Gallary.vue。

需要在详情页的一个组件 Banner.vue 里面去使用这个公共组件

gallary用fixed占满全屏。

利用flex布局，让这个如下wrapper区域垂直居中

然后使用 Vue-awosome-swiper第三方插件，先放入两张图

然后给那个.wrapper定义个宽高100%。按照如下这种写法的话width先有个100%的宽度了然后height也100%的意思是针对于这个width的宽度来说的，所以这里定义了这个100%的height的意思是这个height与width的宽度相等意思是一个正方形。

此时页面：

我们让图片按比例自适应这个正方形，再把wrapper下的背景颜色去掉，此时两张图片可以正常显示轮播了：

然后加页码，其实这个页码就是该插件的按钮区和配置参数一起控制的。先加上按钮区代码：

vue-awesome-swiper这个插件是基于swiper实现的，这里面的配置参数比如 pagination 可以去 swiper 官网找的。

我们去官网找找看能不能找到配置我们页码需求的参数（当然是能找到的，不然我还写个啥...）：

由此可见，这个页面的翻页样式就是对应这个paginnation中的paginationType 中的 fraction。

现在来配置参数，首先在swiper上加上 :options="swiperOption"。

然后在data里配置。先把按钮区配置出来：

再把paginationType ‘fraction’ 分式给配置出来

现在就有了，但在小小的地方，审查元素才可以看见

原本框架的样式，通过审查元素找出这里是绝对定位。

那么我们这样改bottom -1rem就行了？

那肯定是不行的...

这里有个坑，当感觉代码没写错，页面却没达到预期的时候，就是再次审查元素的时候了...审查元素发现这个插件组件有个swiper-container里还定义了个overflow: hidden。

所以我们在画廊组件里穿透作用域来改掉这个样式就行

画廊逻辑部分很简单就跳过不记录了，不过有个坑还是值得提一下。

在画廊自身的组件gallary.vue里测试功能的时候都好好的，但是gallary这个公有组件是要在详情页的Banner.vue组件中引入的。

那么问题就来了，当我们在Banner组件对应的页面一下子点进去gallary组件对应的页面的时候，轮播插件会出现一个计算宽度高度的问题。如下gif图这样：

要解决这个问题，需要在gallary的轮播插件配置参数中加上这两个配置参数

加上这两个参数的意思是：

我这个swiper插件，只要监听到我这个元素，或者父级元素变化的时候（这个监听的就是swiper和swiper的父级元素），这个插件会自动地自动刷新一次，重新计算宽高。

通过这次自我刷新，就可以解决轮播插件的这个计算宽度高度的问题。（这些配置参数在swiper官网都可以查到怎样用的）

实现header区块渐隐渐现的效果

看个gif。

仅提这段，当手指往下滑的时候，逐渐显示清晰之后一直清晰的div景点详情框逻辑。

这个逐渐显示清晰的这块是用个div框来fixed定位写的。

逻辑

一开始v-show不显示这个div框并且让该div框的opacity为0，在activated钩子函数中检测全局scroll(window.onscroll)事件(即检测滚动条的状态，滚动条一旦动了就触发scroll事件)，当触发scroll事件时，执行一个方法，此方法里面写逻辑。写的逻辑是：当滚动条往下滑动60px外时让这个div框的v-show参数为true并且通过公式 let opacity = document.documentElement.scrollTop / 140 来让该div框随着越往下滑动清晰度越高，然后在这条语句下面限制opacity透明度值为1：opacity = opacity > 1 ? 1 : opacity。