摘要：用開(kāi)發(fā)仿旅游站項(xiàng)目總結(jié)上該說(shuō)的話，該表明的上篇已經(jīng)表明了。之后的路由切換不再請(qǐng)求數(shù)據(jù)是因?yàn)榻M件內(nèi)容是從內(nèi)存取了不會(huì)再重新創(chuàng)建了，對(duì)應(yīng)的鉤子函數(shù)不會(huì)再執(zhí)行了。此時(shí)，通過(guò)新增的生命周期鉤子函數(shù)以及這個(gè)緩存值就實(shí)現(xiàn)了我們要的功能了。

用Vue開(kāi)發(fā)仿旅游站webapp項(xiàng)目總結(jié) （上）
該說(shuō)的話，該表明的上篇已經(jīng)表明了。謝謝上篇評(píng)論區(qū)一些同學(xué)~ 很鼓勵(lì)我，不過(guò)下下篇估計(jì)沒(méi)了，這篇總結(jié)完，下下篇可能就是之后學(xué)習(xí)路的總結(jié)記錄啦。

接觸vue不久的朋友應(yīng)該會(huì)有收獲。此項(xiàng)目也才是萌新做的第二個(gè)Vue項(xiàng)目，使用了腳手架工具（vue-cli2.x非3），前輩老手們有時(shí)間看的話，有寫得不好的地方還請(qǐng)多多指導(dǎo)！~

因?yàn)檫@只是總結(jié)操作/思路，沒(méi)一步步講代碼，還是先給個(gè)官網(wǎng)的圖，這樣方便看點(diǎn)：

前提假設(shè)，在腳手架中，我們跟路由引入全局的方法一致去在全局中引入Vuex。創(chuàng)建一個(gè)文件夾store，在文件夾下創(chuàng)建個(gè)index.js腳本。在store/index.js里面寫Vuex的一些用法邏輯，然后在入口函數(shù)main.js里引入就行了。如下：

先忽略馬賽克...

在入口函數(shù)main.js中引入：

此時(shí)index.js里面的邏輯

以此項(xiàng)目中為例，隨著項(xiàng)目的開(kāi)發(fā)，index.js里的邏輯會(huì)越來(lái)越復(fù)雜，所以選擇拆分。

所以，我們建立兩個(gè)腳本（state.js、mutations.js）來(lái)分別存儲(chǔ)這兩段代碼。

然后在index.js中引入：

這樣拆分完成，簡(jiǎn)潔不少。

在項(xiàng)目中，如下圖用法去取得state里面city的數(shù)據(jù)，是不是顯稍長(zhǎng)了點(diǎn)？

Vuex為我們提供了一個(gè)方便的API -> mapState

這樣用：

mapState是指，我把State區(qū)域里面的公有屬性值映射到這個(gè)計(jì)算屬性里。

在這里是：把state里city這個(gè)公有屬性的值映射到這里的計(jì)算屬性city里。

這樣子的話，就可以把

變成可以直接調(diào)用這個(gè)計(jì)算屬性：

...mapState({}/[])這里面可以是數(shù)組也可以是對(duì)象。是數(shù)組的話，那我們就等于直接給計(jì)算屬性取名city了，和公有屬性的名稱一樣。

是對(duì)象的話，我們就可以給計(jì)算屬性自定義取名。

舉個(gè)...mapState(對(duì)象)的例子：

在當(dāng)前城市這里也可以改：

這里就是傳對(duì)象給mapState，等于把公有屬性city的值映射到計(jì)算屬性currentCity里。

此時(shí)就可以這樣用：

這樣子就不用寫的那么復(fù)雜了。

利用Vuex提供的這個(gè)API可以簡(jiǎn)化下列代碼：

這樣用：

mutations里面是有changeC2()這個(gè)函數(shù)的（這個(gè)命名就....僅當(dāng)測(cè)試，輕噴）。我們想在組件中調(diào)用mutations里的這個(gè)函數(shù)去改變公有數(shù)據(jù)區(qū)域state里的值，運(yùn)用mapMutations可以這樣簡(jiǎn)潔地在組件中調(diào)用。

這什么意思呢？

mutations里有個(gè)叫做changeC2這個(gè)方法，這里在該組件的methods中是把這個(gè)mutations里的changeC2方法映射到了該組件中methods的changeC2方法里。

...mapMutations()參數(shù)也是可接收[]/{}的。

還是用...mapMutations(對(duì)象寫法)好理解一點(diǎn)，如下，做個(gè)測(cè)試：

（亂入的小姐姐~）

這樣子寫也是可以的。也更容易理解這里的映射。

Getter和Module該項(xiàng)目中都沒(méi)有用到。

假如我們想根據(jù)state的值，通過(guò)一些計(jì)算得到新的值的話，就可以用getter來(lái)提供新的數(shù)據(jù)，避免數(shù)據(jù)冗余。它的定義也和computed一樣。

getter可以認(rèn)為是store的計(jì)算屬性。就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。

Getter 接受 state 作為其第一個(gè)參數(shù)，也可以接收其他 getter 作為第二個(gè)參數(shù)?？梢詫傩栽L問(wèn)（store.getters），可以通過(guò)方法訪問(wèn)，也有 mapGetters輔助函數(shù)（該輔助函數(shù)主要也是映射關(guān)系，將store中的getter映射到局部組件的計(jì)算屬性中）。官方文檔給的例子也比較好理解，可以自行看文檔。

Module的話，看得勉強(qiáng)理解，Vuex允許我們將store分割成模塊（module）。每個(gè)模塊擁有自己的state、mutation、action、getter、甚至是嵌套子模塊。

當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，可以使用Module避免store對(duì)象變得相當(dāng)臃腫。

我覺(jué)得Module具體的應(yīng)用要在復(fù)雜項(xiàng)目中親自練手過(guò)才能熟練，目前不敢輕易下手記錄，暫且記一筆。

我們可以在 開(kāi)發(fā)者工具 network 的xhr 中看到

每次我們路由切換的時(shí)候（從Home組件頁(yè)面跳轉(zhuǎn)到City組件頁(yè)面或反之的時(shí)候）都要發(fā)送ajax請(qǐng)求數(shù)據(jù)。

這樣子就重復(fù)請(qǐng)求ajax數(shù)據(jù)了，因?yàn)槊看温酚汕袚Q到一個(gè)組件的時(shí)候，都要重新執(zhí)行該組件鉤子函數(shù)，如果該組件有在mounted鉤子里請(qǐng)求ajax的話，就每次路由切換都要執(zhí)行了。這樣性能不好。

此時(shí)就可以用vue內(nèi)置的 keep-alive標(biāo)簽來(lái)優(yōu)化。

在全局根組件App.vue中

代表的是顯示當(dāng)前路由的組件，而在這個(gè)外面加個(gè) vue 內(nèi)置的 keep-alive標(biāo)簽后，就可以實(shí)現(xiàn)這樣一個(gè)功能：

我的路由的內(nèi)容被加載過(guò)一次之后，我的路由中的內(nèi)容就都放到內(nèi)存之中，下一次再進(jìn)這個(gè)路由的內(nèi)容的時(shí)候，就只需要從內(nèi)存里把以前的內(nèi)容拿出來(lái)就可以了。

此時(shí)，不管切換多少次路由，都只有兩次ajax數(shù)據(jù)請(qǐng)求了。

因?yàn)槭褂昧薻eep-alive標(biāo)簽，導(dǎo)致有了新的生命周期函數(shù)activated（keep-alive組件激活時(shí)調(diào)用）、deactivated（keep-alive 組件停用時(shí)調(diào)用）。

之后的路由切換不再請(qǐng)求ajax數(shù)據(jù)是因?yàn)榻M件內(nèi)容是從內(nèi)存取了不會(huì)再重新創(chuàng)建了，對(duì)應(yīng)的mounted鉤子函數(shù)不會(huì)再執(zhí)行了。

但每次切換、頁(yè)面重新顯示的時(shí)候，activated鉤子會(huì)執(zhí)行。

此時(shí)可以利用這個(gè)鉤子實(shí)現(xiàn)一個(gè)需求：

當(dāng)在列表頁(yè)選擇點(diǎn)擊了哪個(gè)城市后，路由切換回到首頁(yè)時(shí)，首頁(yè)顯示的數(shù)據(jù)是對(duì)應(yīng)著該城市的數(shù)據(jù)（意味著ajax只請(qǐng)求該城市對(duì)應(yīng)的Home組件頁(yè)面的數(shù)據(jù)）,然后如果在列表頁(yè)，選擇了與原本在Home頁(yè)相同的城市的話，就不發(fā)送ajax請(qǐng)求新數(shù)據(jù)。

之前，發(fā)ajax請(qǐng)求的時(shí)候，是直接這樣子發(fā)：

實(shí)際上，在發(fā)送ajax請(qǐng)求的時(shí)候，應(yīng)該帶一個(gè)參數(shù)的。帶的這個(gè)參數(shù)應(yīng)該是 Vuex 中公有的這個(gè)數(shù)據(jù)。也就是當(dāng)點(diǎn)擊哪個(gè)城市的時(shí)候，這個(gè)參數(shù)就是對(duì)應(yīng)哪個(gè)城市的名稱。

怎么在請(qǐng)求中帶參數(shù)呢？

在請(qǐng)求的連接后面 加上 ?=參數(shù)數(shù)據(jù)

如：

在網(wǎng)頁(yè)上試一試，發(fā)送的參數(shù)就在下面

實(shí)現(xiàn)需求的思路是：

在每一次頁(yè)面重新顯示的時(shí)候（activated鉤子函數(shù)觸發(fā)）我們判斷此時(shí)頁(yè)面上的城市是否和上一次顯示的城市相同  如果不相同  就發(fā)送ajax請(qǐng)求

然后我們?cè)O(shè)置個(gè)空字符串 lastCity (當(dāng)做一個(gè)中間緩存值用于判斷)

緊接著，當(dāng)頁(yè)面掛載完畢的時(shí)候，我們給它賦予當(dāng)前頁(yè)面的城市數(shù)據(jù)。

然后在頁(yè)面更新的時(shí)候，判斷上一次的 this.lastCity 的值 是否等于 更新后的 this.city 的值。如果不等于的話，就發(fā)送新的ajax請(qǐng)求，請(qǐng)求相應(yīng)city的數(shù)據(jù)，如果等于的話就不發(fā)送。

此時(shí)，通過(guò)keep-alive新增的生命周期鉤子函數(shù)以及l(fā)astCity這個(gè)緩存值就實(shí)現(xiàn)了我們要的功能了。

先看個(gè)gif說(shuō)明此功能啥樣：

就這個(gè)玩意兒。這個(gè)就是畫(huà)廊。上面有輪播，下面有頁(yè)碼。

因?yàn)檫@不僅僅只有一個(gè)頁(yè)面會(huì)用到，可能以后很多頁(yè)面都會(huì)用到，所以 寫個(gè)全局公用的組件Gallary.vue。

需要在詳情頁(yè)的一個(gè)組件 Banner.vue 里面去使用這個(gè)公共組件

gallary用fixed占滿全屏。

利用flex布局，讓這個(gè)如下wrapper區(qū)域垂直居中

然后使用 Vue-awosome-swiper第三方插件，先放入兩張圖

然后給那個(gè).wrapper定義個(gè)寬高100%。按照如下這種寫法的話width先有個(gè)100%的寬度了然后height也100%的意思是針對(duì)于這個(gè)width的寬度來(lái)說(shuō)的，所以這里定義了這個(gè)100%的height的意思是這個(gè)height與width的寬度相等 意思是一個(gè)正方形。

此時(shí)頁(yè)面：

我們讓圖片按比例自適應(yīng)這個(gè)正方形，再把wrapper下的背景顏色去掉，此時(shí)兩張圖片可以正常顯示輪播了：

然后加頁(yè)碼，其實(shí)這個(gè)頁(yè)碼就是該插件的按鈕區(qū)和配置參數(shù)一起控制的。先加上按鈕區(qū)代碼：

vue-awesome-swiper這個(gè)插件是基于swiper實(shí)現(xiàn)的，這里面的配置參數(shù)比如 pagination 可以去 swiper 官網(wǎng)找的。

我們?nèi)ス倬W(wǎng)找找看能不能找到配置我們頁(yè)碼需求的參數(shù)（當(dāng)然是能找到的，不然我還寫個(gè)啥...）：

由此可見(jiàn)，這個(gè)頁(yè)面的翻頁(yè)樣式就是對(duì)應(yīng)這個(gè)paginnation中的paginationType 中的 fraction。

現(xiàn)在來(lái)配置參數(shù)，首先在swiper上加上 :options="swiperOption"。

然后在data里配置。先把按鈕區(qū)配置出來(lái)：

再把paginationType ‘fraction’ 分式 給配置出來(lái)

現(xiàn)在就有了，但在小小的地方，審查元素才可以看見(jiàn)

原本框架的樣式，通過(guò)審查元素找出這里是絕對(duì)定位。

那么我們這樣改bottom -1rem就行了？

那肯定是不行的...

這里有個(gè)坑，當(dāng)感覺(jué)代碼沒(méi)寫錯(cuò)，頁(yè)面卻沒(méi)達(dá)到預(yù)期的時(shí)候，就是再次審查元素的時(shí)候了...審查元素發(fā)現(xiàn)這個(gè)插件組件有個(gè)swiper-container里還定義了個(gè)overflow: hidden。

所以我們?cè)诋?huà)廊組件里穿透作用域來(lái)改掉這個(gè)樣式就行

畫(huà)廊邏輯部分很簡(jiǎn)單就跳過(guò)不記錄了，不過(guò)有個(gè)坑還是值得提一下。

在畫(huà)廊自身的組件gallary.vue里測(cè)試功能的時(shí)候都好好的，但是gallary這個(gè)公有組件是要在詳情頁(yè)的Banner.vue組件中引入的。

那么問(wèn)題就來(lái)了，當(dāng)我們?cè)贐anner組件對(duì)應(yīng)的頁(yè)面一下子點(diǎn)進(jìn)去gallary組件對(duì)應(yīng)的頁(yè)面的時(shí)候，輪播插件會(huì)出現(xiàn)一個(gè)計(jì)算寬度高度的問(wèn)題。如下gif圖這樣：

要解決這個(gè)問(wèn)題，需要在gallary的輪播插件配置參數(shù)中加上這兩個(gè)配置參數(shù)

加上這兩個(gè)參數(shù)的意思是：

我這個(gè)swiper插件，只要監(jiān)聽(tīng)到我這個(gè)元素，或者父級(jí)元素變化的時(shí)候（這個(gè)監(jiān)聽(tīng)的就是swiper和swiper的父級(jí)元素），這個(gè)插件會(huì)自動(dòng)地自動(dòng)刷新一次，重新計(jì)算寬高。

通過(guò)這次自我刷新，就可以解決輪播插件的這個(gè)計(jì)算寬度高度的問(wèn)題。（這些配置參數(shù)在swiper官網(wǎng)都可以查到怎樣用的）

看個(gè)gif。

僅提這段，當(dāng)手指往下滑的時(shí)候，逐漸顯示清晰之后一直清晰的div景點(diǎn)詳情框邏輯。

這個(gè)逐漸顯示清晰的這塊是用個(gè)div框來(lái)fixed定位寫的。

一開(kāi)始v-show不顯示這個(gè)div框并且讓該div框的opacity為0，在activated鉤子函數(shù)中檢測(cè)全局scroll(window.onscroll)事件(即檢測(cè)滾動(dòng)條的狀態(tài)，滾動(dòng)條一旦動(dòng)了就觸發(fā)scroll事件)，當(dāng)觸發(fā)scroll事件時(shí)，執(zhí)行一個(gè)方法，此方法里面寫邏輯。寫的邏輯是：當(dāng)滾動(dòng)條往下滑動(dòng)60px外時(shí)讓這個(gè)div框的v-show參數(shù)為true并且通過(guò)公式
let opacity = document.documentElement.scrollTop / 140
來(lái)讓該div框隨著越往下滑動(dòng)清晰度越高，然后在這條語(yǔ)句下面限制opacity透明度值為1：opacity = opacity > 1 ? 1 : opacity。

顯而易見(jiàn)：document.documentElement.scrollTop的意思是獲取當(dāng)前頁(yè)面的滾動(dòng)條縱坐標(biāo)位置。

這樣功能實(shí)現(xiàn)了，但還有個(gè)很重要的坑。對(duì)全局事件的解綁。

在header區(qū)塊邏輯中，我們?cè)赼ctivated鉤子中定義了個(gè)全局scroll事件。

因?yàn)檫@個(gè)是全局事件，所以我們?cè)谄渌M件中也可以監(jiān)測(cè)到。這樣很容易引發(fā)一系列嚴(yán)重的隱藏的bug。

所以我們應(yīng)該在detail下header.vue組件中對(duì)該組件解綁：

對(duì)應(yīng)keep-alive引用而可以使用的鉤子還有一個(gè)deactivated鉤子。
該鉤子在頁(yè)面即將被替換成新的頁(yè)面的時(shí)候觸發(fā)。

所以這里我們利用deactivated鉤子和removeEventListener函數(shù)來(lái)解綁全局事件。

舉個(gè)例子，list組件的name: "DetailList"。在list組件模板中想要使用遞歸組件調(diào)用自身時(shí)，就要根據(jù)name的值來(lái)用作標(biāo)簽（detail-list）調(diào)用。如下：

假設(shè)有個(gè)Detail.vue組件，其name: " Detail"。當(dāng)想要keep-alive全局組件時(shí)，Detail.vue組件對(duì)應(yīng)的頁(yè)面，路由重新切換到這個(gè)頁(yè)面不用去內(nèi)存中取緩存值，可以利用Detail組件的name的值如下使用：

這樣等于是除了Detail.vue組件，其他組件都可以擁有設(shè)置keep-alive后的功能。

如上圖紅框里的組件名稱，這里的名稱就取決于設(shè)置的組件的name屬性的值。

舉項(xiàng)目中例子說(shuō)明，注意下圖紅框中的值

此時(shí)我們應(yīng)該獲取的是，動(dòng)態(tài)路由中 id為0002的參數(shù)的數(shù)據(jù)。

這樣設(shè)置后，其實(shí)動(dòng)態(tài)路由中，會(huì)把對(duì)應(yīng)的參數(shù)存在 這個(gè)變量id里。

每次請(qǐng)求，希望把這個(gè)id帶給后端，就可以這樣寫：

現(xiàn)在可以在network的XHR里看見(jiàn)我們發(fā)送給后端的請(qǐng)求中附帶了 id

前面只寫接口名 后面這樣子寫（我們把參數(shù)放到params去了）：

設(shè)置的動(dòng)態(tài)路由，只是動(dòng)態(tài)加了個(gè)id參數(shù)并不能自動(dòng)讓頁(yè)面也跟著動(dòng)態(tài)顯示數(shù)據(jù)，動(dòng)態(tài)顯示數(shù)據(jù)還得靠ajax請(qǐng)求數(shù)據(jù)。

而目前這個(gè)組件是在mounted鉤子中執(zhí)行ajax請(qǐng)求的，并且該組件有keep-alive的作用影響著。這樣當(dāng)路由跳轉(zhuǎn)到id為0003/0004...頁(yè)面的時(shí)候，組件也只會(huì)從內(nèi)存中取出第一次進(jìn)入該組件某個(gè)id的頁(yè)面。并不能根據(jù)id對(duì)應(yīng)顯示頁(yè)面。

怎樣通過(guò)ajax請(qǐng)求而動(dòng)態(tài)顯示數(shù)據(jù)呢？有兩種方法，兩種方法上面都提到過(guò)。

第一種

在列表頁(yè)選擇某個(gè)城市，路由自動(dòng)跳轉(zhuǎn)回首頁(yè)后，首頁(yè)需要顯示的是該城市對(duì)應(yīng)的數(shù)據(jù)這里記錄過(guò)。（提示一下：利用activated鉤子，判斷參數(shù)id是否等于之前的id，如果不等則重新執(zhí)行ajax請(qǐng)求。）

第二種

組件中name屬性的三個(gè)作用中的第二個(gè)作用已經(jīng)說(shuō)出了解決方案。

這兩種方式留給讀者自行思考，想不通的可以參考下我github該倉(cāng)庫(kù)里的代碼。src/pages/detail/Detail.vue

來(lái)看個(gè)gif

這就是路由跳轉(zhuǎn)頁(yè)面會(huì)帶來(lái)的影響。會(huì)把當(dāng)前頁(yè)面（Home.vue）的屏幕的顯示的寬高 帶到 我們跳轉(zhuǎn)到的頁(yè)面（Detail.vue）上去。造成如上gif所示現(xiàn)象。

這樣來(lái)解決。

這個(gè)在官方文檔中稱為 路由的滾動(dòng)行為。

我們現(xiàn)在是想讓每次路由切換進(jìn)入到下一個(gè)頁(yè)面的時(shí)候滾動(dòng)在頂部顯示。 繼續(xù)看文檔。

把這段代碼復(fù)制到路由配置項(xiàng)中：

這樣就實(shí)現(xiàn)我們預(yù)期的需求。

一般等后端數(shù)據(jù)寫好后，我們就不再使用自己前端模擬的數(shù)據(jù)，而是去使用后端給過(guò)來(lái)的數(shù)據(jù)來(lái)調(diào)試。

如果要訪問(wèn)服務(wù)器上的數(shù)據(jù)的話，要在配置文件config/index.js下的proxyTable里把target改為服務(wù)器的地址（可以寫內(nèi)網(wǎng)的IP地址 或 外網(wǎng)的域名都行）。然后改pathRewrite的話，就見(jiàn)實(shí)際情況數(shù)據(jù)存放在服務(wù)器的哪個(gè)文件夾下了。

這里的前端的項(xiàng)目是通過(guò) webpack-dev-server 啟動(dòng)的，默認(rèn)不允許通過(guò)ip來(lái)訪問(wèn)內(nèi)部服務(wù)器。所以我們需要把默認(rèn)的配置項(xiàng)做修改。

想讓這個(gè) webpack-dev-sever 能夠被ip訪問(wèn)的話，需要這樣配置下：

(貌似漏點(diǎn)了... 其實(shí)也沒(méi)關(guān)系....)

然后這里真機(jī)測(cè)試的時(shí)候，有時(shí)候就會(huì)遇到一些在PC上開(kāi)發(fā)時(shí)發(fā)現(xiàn)不了的bug以及要考慮兼容性。這個(gè)就要各人根據(jù)實(shí)際情況來(lái)改了。

vue-cli 2.x中，就可以在項(xiàng)目目錄下執(zhí)行指令 npm run build，此時(shí)Vue的腳手架工具會(huì)幫我們自動(dòng)地對(duì)src目錄下源代碼進(jìn)行打包編譯生成一個(gè)能被瀏覽器運(yùn)行的代碼，同時(shí)這個(gè)代碼也是壓縮過(guò)后的代碼。

打包完成后會(huì)生成一個(gè)dist文件夾，給到后端開(kāi)發(fā)人員，或者直接把static文件夾里的內(nèi)容扔到后端服務(wù)器根目錄上就OK了。這只是基本的操作，想要改變?cè)L問(wèn)路徑或怎樣的操作，就各位小伙伴自己去找了，有心自會(huì)找到~

這篇文章僅是在這個(gè)項(xiàng)目中對(duì)于我個(gè)人而言覺(jué)得可以總結(jié)記錄下來(lái)的，更具體更詳細(xì)的知識(shí)和流程，感興趣不妨去imooc支持一下DellLee老師的這門課程~

有部分地方代碼量太多不方便貼出來(lái)，想?yún)⒖即a學(xué)習(xí)的可以進(jìn)我Github。

希望也能幫到你們~