記錄 - mixins的複用封裝

 項目結構截圖：

• api 下的module 的用途，由於項目比較大，api.文件比較多， 因此我都放module文件夾了，看着簡潔一些
• libs 下面的文件 多數爲 iview-admin 複製過來的，個別是本身之前封裝的工具類，也統一的放libs 下了。 （歡迎吐槽，和指點意見）
• 項目中有不少二級文件夾，由於項目不少板塊，因此我經過這樣的方式區分出來，項目結構會變得簡潔許多。
• store/module/app.js 是iview-admin 的 我沒有改動，直接copy 的，由於菜單及頂部的 導航標籤均爲iview-admin 的功能。
• 項目也用了 jest 作單元測試（函數，不包括組件單元測試，歡迎一塊兒討論），這裏有個坑，我直接使用jest,會報一堆錯，百度無果， 而後就只能建了一個二級目錄，結果一切正常， 外層報錯和label 有關。 （有誰知道怎麼解決的，告訴我，謝謝各位大佬）

mixins 使用之道：

項目中，目前就使用了兩個mixins ,可是兩個mixins 支撐了整個項目的功能運行。 （頁面效果圖）

注：這個界面的代碼，對應上面項目截圖的代碼，沒想到吧，上面那個界面看着功能，代碼卻就這麼多。拋開 template 的佈局，代碼不多。 由於多數功能（列表，編輯，添加，移除）都已經交給mixin 處理了， 這裏須要注意一點，這裏有個baseListUrl 是每一個列表界面的基本地址，這裏必定要和後臺溝通，列表的 後綴必定要保證一致，否則你的mixin 就無法用了。咱們後臺 （*/list [列表] */delete [移除] */addOrUpdate [編輯/更新]）

這個就是 list - mixin

這裏介紹一下細節，其它的，請看源碼都有註釋。

1. mixin 初始化數據爲何放在beforeMount ？ 答: 由於beforeCreate 組件尚未建立完成，而create 我又會做爲 數據初始化的操做，好比請求參數初始化，爲了不衝突，因此放在 beforeMount 最爲合適。
2. 搜索參數爲何會有兩個？ 答：（由於listParams 的參數部分會雙向綁定，若是不使用兩個的話，當有篩選項改變時，又切換頁碼就會出現帶參搜索了，因而每次搜索只會用searchParams參數，當點擊搜索時，又會吧listParams請求參數賦值給searchParams，這樣就能夠避免雙向綁定的尷尬了）
   
3. 其它問題，我暫時想不到，能夠留言問我。 或者仔細查看我發佈的源碼。就能理解了。
4. 因此mixin 負責了界面的獲取，頁面的搜索處理及頁碼切換功能，凡是列表會涉及的操做我都放在了mixin 中，處理保證了代碼最小量。
5. 固然若是你想定義你本身的搜索，能夠直接在組件 methods 寫一個getList ， 他就會自動覆蓋mixin 的事件，簡單方便，其它事件以此類推。

另外一個mixins (編輯/新增彈窗的mixin)

1. baseUrl 是做爲編輯是獲取單個數據的操做。 這裏的url 通常和列表的baseurl 同樣，因此我大部分都是直接傳的baseListUrl 。
2. finish /cancel 事件爲何要經過props 動態傳入，而不是經過$emit 呢？ 答：若是使用$emit , 由於添加/編輯操做是在父組件的list-mixin裏（我這裏不可能再次引用一次 list-mixin），但這樣的話，我通知了父組件，並把參數傳過去了，父組件請求成功了，我又怎麼知道在什麼時候關閉當前的dialog呢？若是$emit 請求後就關閉彈窗，萬一後臺提示的是保存出錯信息呢？ 這時候dialog 又關閉了，數據也丟失了。 尷尬！！！因此這裏經過props 動態傳入， 父組件的 addOrUpdate** 函數，會返回一個Promise 函數，當點擊保存時，就調用this.finish(params).then(res={**},err ={**}) 若是成功我就關閉，不成功我也能夠進行其它的相關操做，哈哈哈，機智 （這裏我踩過坑，我第一次是經過的$emit ，沒有考慮請求失敗的狀況）

結束語

• 由於上班的緣由，這裏只寫了mixin 的封裝，可是這裏的mixin 包含了全部列表的邏輯封裝，也是精華。 經過這樣的一個封裝，平均我一天可以寫3個界面，包含編輯/列表和其它的功能邏輯。 （不知道這個效率慢嗎？）
• 開發過程當中，也碰見了一些坑。可是隻要耐心搜索就能找到問題緣由的。而在等待後臺接口的同時，在優化項目。讓項目變得簡潔。
• 項目結構但願可以給大家達到幫助，同時若是有好的建議，能夠一塊兒交流。
• 代碼我會放在git 上面，由於公司業務的緣由，我不能所有界面放上，可是我會保留兩個不重要界面，給大家做爲參考。及我會在git 的項目下，給大家留一個福利，但願這篇文章能給大家一些幫助。
• 項目我會使用 mock.js 攔截模擬數據，若是想了解他，能夠看看個人另外一個文章，關於mock.js 的使用的。

github.com/cgh1999520/…

Git 入口

注：上文中若是有侵犯你的利益，或其它侵犯，請聯繫我。