現在正式迴歸，開始好好做專案了，正好這一個專案也開始慢慢的開始起色了，前面的準備工作都做的差不多了。
而且我現在也開始慢慢了解到了一些專案才開始需要的一些什麼東西了，vuex、router這些都是必備的，後期一定要練得非常熟練才行。
一.重寫push/replace方法
有一個程式設計式導航的bug，當我們重複點選程式設計時導航的跳轉，同時傳的都是相同的引數，這個時候就會報錯,報NavigationDuplicated，這是一個底層錯誤，歸根結底是因為vue在2的版本將程式設計式導航跳轉的新增了一個 promise，我們都知道promise是需要一個成功回撥和失敗回撥的，而我們在發起跳轉的時候並沒有定義這些，所以會報錯
所有有一個簡單粗暴的解決辦法，就是在後面新增兩個回撥函式，甚至你可以引數都不寫，反正回撥已經有了，無非就是你不列印輸出也不做什麼邏輯的事情
但是這種方法治標不治本，萬一有很多路由的跳轉，那是不是每一個跳轉這裡都要去寫一下這兩個回撥，顯然是不可能的。
要治標治本，首先得弄清楚幾個問題，我們的$router其實是VueRouter這個建構函式new出來的例項，然後我們的push、replace方法其實是在這個建構函式的prototype也就是原型物件上，所以我們的push方法裡面的this指向的就是VueRouter的物件例項
下面就可以開始重寫了，要找到VueRouter所在的地方，也就是router的配置檔案，這裡面註冊了他一下，首先我們需要定義一個變數將原來的VueRouter原型物件上的push方法儲存下來，然後開始重寫，可以看到我們的原始push方法是要傳入是三個引數，第一個是跳轉的位置，後面兩個是promise的回撥
所以我們可以判斷一下我們傳進來的引數除了location之外有沒有兩個回撥，做一個if判斷，如果有就執行你的回撥，如果沒有我就自動寫上兩個回撥，這裡還有一個注意點，我們之前分析過push的this是建構函式例項，你如果直接像下面這樣呼叫，很明顯你裡面的this都會指向window，因為這個變數是在全域性作用域下定義的
所以通過call方法將this改回來，幸運的是，此時這個push方法裡面的this就是我們的建構函式例項
replace同理
二.Home模組元件拆分
又是進行模組拆分的時候，所以首先要完成靜態頁面，再進行模組拆分，然後是動態資料展示，最後是一些事件的完成。對於Home模組
首先是一個三級聯動效果，而且由於是home、search都有的，所以這個元件可以註冊為全域性元件
然後輪播圖是一個元件
今日推薦一個元件
熱賣排行一個元件
猜你喜歡一個元件
家用電器一個元件，後面的手機通訊跟其一樣的結構，所以可以複用
最後各商品的log一個元件
所以一共有七個元件
1.TypeNav三級聯動全域性元件
直接在Home資料夾下面建立一個資料夾typenav作為我們的三級聯動元件
靜態頁面建立好
然後就可以去註冊全域性元件了，在入口檔案註冊，前面是我們的元件標籤名字，後面是我們的元件所在的位置
因為是全域性元件，所以其他元件要用直接用，不用再去註冊匯入
2.剩下靜態元件
在Home下建立對應的元件資料夾，然後建立元件複製對應的html+css+圖片，匯入到home並註冊即可，要注意這裡這是完成靜態頁面，所有的邏輯包括輪播圖等，這些都暫時不要管
三.axios相關配置
1.axios二次封裝
為什麼要對axios進行二次封裝？
其主要目的是為了請求攔截器和響應攔截器，其中請求攔截器就是當我們發起請求之前可以處理一些業務；響應攔截器就是當我們的資料響應回來的時候可以處理一些業務
首先我們一般是在src下面建立一個api的資料夾裡面存放一些axios的配置檔案
首先在api下建立一個request關於請求的axios配置檔案
先通過axios的create方法可以建立一個axios的自定義例項，其中裡面的 baseurl會自動加在以後配置axios時的url前面，就不用再去輸入一些大家都有的字首了，timeout就不用說了，xhr2新特性
新增請求和響應攔截器可以直接參考axios中文文件
這裡面 config是我們的請求頭，必須原樣返回，Promise.reject（）是promise的一個方法，專門返回一個錯誤的promise物件至於這裡為什麼要返回一個promise物件（因為我們封裝了之後後面發起ajax請求都是用requests來發起，我們的axios最典型的特點就是promise風格，所以由.then方法），然後我們只要返回成功的data資料直接在這裡響應攔截器返回成功的資料返回data
不用去記，文件裡面有，但是要懂寫的什麼。這樣一配置過後，在請求和響應被then或者catch之前就會被攔截到了
2.介面統一管理
當我們專案比較小的時候完全可以在mounted生命週期函式來發起ajax請求。
但是如果我們專案比較大的時候，每個都去他的mounted去發，如果介面地址一變化，又要每個去改就不太現實。
所以這裡採用介面統一管理，一般是定義在api資料夾下的index.js檔案
我們先來獲取三級聯動的資料，當我們在前面axios二次封裝的時候，就已經建立了一個axios的例項，這個例項才擁有攔截器的功能，所以我們後面要使用攔截器發起請求就只能靠這個例項來發起，還有我們已經新增了baseurl所以在寫url的時候可以不寫api了
像這樣我們就可以去測試一下了，如果要發起獲取三級聯動的請求，就直接呼叫函式即可，注意這裡是按需匯出
結果是報錯404，因為我們從始至終都還沒有配置過伺服器的地址，這裡兩個解決方案
- 方案一：將前面的baseurl新增上伺服器地址
-
方案二：（推薦），用到我們的vue專門用來處理伺服器的一個配置項，代理。
這樣配置過後，當我們發起axios請求，並且路徑當中含有/api的話, 就會自動去這個伺服器找/api下面的這些資源，我們原來做代理還有一個配置項pathWrite一個正則替換為空字串，這個的意思是繞過public下面的同名配置檔案，但是伺服器裡面沒有這個pathwrite的目錄所以要替換為空，但是我們這裡伺服器裡面有api的目錄就不用去替換了
3.nprogress進度條使用
首先需要明確一點，這個進度條是我們重新整理網頁也就是獲取請求的時候發起的，所以說我們可以把進度條的邏輯寫在請求和響應的攔截器裡面，這也是第一次使用攔截器，知道了攔截器的處理一些事件的邏輯是寫在這個攔截器裡面
安裝匯入，並且他有兩個方法，start和done分別表示什麼時候開始，什麼時候結束，並且還需要匯入他的樣式
四.vuex模組式開發
vuex是來幫我們管理資料的，當一個專案過大時，不僅是要用vuex來幫我們管理資料，而且還需要分模組來管理資料，這裡就不多介紹了，前面已經介紹過了，直接說怎麼來分，一般是先安裝vuex然後建立一個store資料夾，裡面有一個總得vuex配置檔案index.js，因為他是一個外掛，所以需要註冊，然後這裡直接採用模組化開發。
在store建立資料夾home、search代表兩個模組
然後在我們的主store裡面匯入並且暴露，注意暴露要新增一個配置項 modules
最後還有一點在入口檔案匯入store並且放到vm裡面去
五.三級聯動資料業務
做好了前面的這些前置工作，就可以開始第二步，動態資料的渲染，這裡三級聯動的nav需要通過vuex來處理處理，所以要dispatch到actions，而且應該是頁面一重新整理就有，所以直接寫在mounted生命週期函式裡
開始之前，有個主意事項，我們之前是把TypeNav這個元件寫在Home這個路由元件裡面的，全域性元件一般寫在Components裡面，所以交換一下位置
這裡就不用傳值了，我們要在home模組的actions裡面去發起ajax請求，然後我們前面介面統一管理，已經做好了獲取三級聯動的函式，所以這裡直接匯入，然後呼叫
接下來重點來了，我們封裝的這個函式是做了一個攔截器，到後匯入的這個攔截器，但是我們的攔截器requests他也是axios的一個例項，所以axios得到的結果是promise物件，所以requests出來的結果也是promise物件，所以我們的這個函式的返回結果也是promise物件
雖然我們封裝攔截器的時候，在響應攔截器裡面寫了一些邏輯比如如果是成功，就直接返回data這個資料，但是這是回撥裡面寫的，意思就是要用then的方法，你就可以直接讀取data，而我們這裡返回的是那個promise物件，這裡重點來了，利用async和await提取我們要的資料，首先await放在一個promise前面一個作用是他會等待所有的promise非同步處理完，第二個是他可以提取而且只能提取promise裡面成功的回撥函式的結果，然後我們的async就是會把不管正常函式還是promise物件都變成promise物件，所以他們兩個經常一起使用，最終得到的結果就是這個promise成功的回撥函式的結果,注意區別一下.then獲取到的結果就是data，而這裡就是成功返回的那整個物件
注意，我這裡在元件裡面獲取資料，之前說用mapstate要用簡寫方法，還需要在vuex的模組裡面加入配置項namespaced
這裡真的搞了半天，終於找到解決辦法了，首先這種情況我們的namespaced寫在匯出處
其次很重要的一點，當我們做了模組化又寫了名稱空間後，我們的dispatch需要寫對應的目錄才能夠找到這個actions
現在有了資料，根據結構去列表渲染即可
1.js完成動態背景顏色
滑鼠滑過有動態有背景顏色，不通過css，通過js來完成，這裡的核心在於，我們列表渲染的時候有一個index，同時定義一個資料currentIndex，當我們滑鼠滑過哪一個就把這個一個index賦值給currentIndex，重點邏輯在於給標題繫結一個:class也就是動態的繫結class，裡面寫一個物件前面是屬性名，後面為邏輯當index=currentIndex，為true，你這個才會有class
再新增一個滑鼠離開事件，將currentIndex改為-1即可，一開始currentIndex不能為任何一個已有的index。
但是這裡還有一個需求，滑鼠不是離開標題就沒有背景顏色了，包括上面的全部商品分類離開之後才會消失背景顏色
商品分類和我們的三級聯動是同級
這裡把他們新增一個共同的父級，通過事件委託，把滑鼠移出事件給到他們的父級，移出他們都會通過冒泡去觸發這個移出事件
2.js完成二三級分類顯示隱藏
找到二級分類程式碼處，來一個style動態繫結並且值為一個三目表示式，看current是否等於你這個index，是就返回block，否則返回none
這兩個事件用css都可以完成，但是js有js的好處，比如現在我滑鼠移到全部商品分類，這個二級分類還是在的，這個用css實現起來好像也可以，但是有點不太符合語義化，感覺有點強制性