?●●●

大家好，

我是一名剛步入社會的有志青年開發者。

在校學了三年的后端開發，沒想到剛步入公司干起了前端工作，華麗的轉變讓我有點猝不及防，誰讓我辣么優秀！

趁著頭發茂密，讓我們步入正題！

很有幸進入公司就參與了項目的開發，項目的前端是采用的Vue和Element框架，我剛拿到公司封裝之后的Vue的腳手架翻了翻，瞬間感覺對不起老大，我不配當你小弟，請原諒我猜不透你的心思。何以解憂，唯有度娘。

熟悉了那么一個星期，讓我最欽佩的是調用后端接口這塊封裝的代碼，使用的時候仿佛像在寫java調用類的靜態方法一樣，就像這樣AppController.create，有人肯定會問你的參數是不是讓狗吃了，兄臺白慌，聽哥說完，你不看完我咋提高閱讀量，下面請不要隨地吐痰。

作為前端開發，避免不了與后臺接口打交道，經常要去接口文檔或者訪問swagger網址查看接口詳情，就導致代碼和查看接口之間來回切換。年輕手速快記性好的請隨意。

接口聯調的時候如何一眼就能知道該調哪個接口和傳哪些參數很重要，有助于開發的效率。如果有一種將接口信息植入到前端項目里，調用的時候它還能提示你調哪個方法，參數還能一目了然的方式，那就美滋滋了。然而在這里，你賺大了。

框架的靈魂在于它的設計思想，在這里僅傳授設計思想，不然就像我最近寫論文一樣半天憋不出倆字寫個猴年馬月。

唉

前面寫的有點啰嗦了，

下面那就開始掉頭發吧。

首先了解一下前端管理后臺接口的架構流程，技術選型后端要使用swagger接口管理，前端vue使用vuex狀態管理，解析swagger需要用到Handlebars模板編譯和fs文件解析。

1、使用Swagger。

首先要想設計好這塊，必須要求后臺服務引入swagger插件，它就是一款讓你更好的書寫API文檔的框架。如果你公司沒有用它就lower了，我不是求針對，我就是針對你。

2、解析Swagger和生成actions。

后臺服務啟動后訪問http://ip:port/v2/api-docs得到一個JSON字符串，首先將字符串解析成JSON對象，然后獲取對象中tags數組和paths對象，tags里面包含每個類的名稱和描述，paths里面包含接口的訪問url、請求方式、接口描述、所屬tags和參數描述。通過遍歷tags從paths對象里面獲取每個接口的詳細信息，最后通過Handlebars編譯成指定格式的js文件。每個類對應一個文件，文件內容是一個對象，里面包含一個actions對象，這個actions對象含有一個類里面的所有接口詳細信息。說到這里，估計有的小伙伴已經眼神已經迷離了。總結一下，網上一大堆，不抄你賴誰，寫好喝咖啡，王者帶你飛。

3、vuex裝飾actions。

我們都知道vuex里面action是支持異步操作的。這里我們對上述每個生成的acitons文件進行裝飾，裝飾的內容包括每個接口請求前、發送請求和請求之后對state數據的改變。裝飾之后生成新的actions。最后交給store進行管理。這里的發送請求其實就是調用封裝好之后的axios的方法。

4、組件使用vuex輔助函數。

vuex里面有四個輔助函數mapState()、mapGetters、mapMutations和mapActions，這里僅使用mapState和mapActions即可滿足需求，其中mapState用來獲取請求接口的loading情況，通過判斷loading和v-loading結合可以提高用戶體驗。mapActions將保存在store的actions映射到組件當中，在組件中直接可以通過this來調用actions完成網絡請求。

5、抽離封裝組件。

我們不能在每次調用接口都使用輔助函數來一遍吧，所以需要抽離一個公共組件，在這個公共組件里可以封裝一個統一的方法調用mapActions生成的函數，通過傳遞action函數名和參數來完成接口的調用，組件里面還可以封裝一些對請求錯誤處理的公共方法。如果想要更簡單的，可以封裝一個全局的方法dispatch進行調用。

6、混入(mixins)使用。

Vue里面有一個很好的混入功能，混入組件擁有自己的生命周期，可以將一些公共的數據放在組件里。這里我們可以通過混入將之前抽離封裝的組件。在需要接口調用時，直接可以this.xxx進行調用。

最后達到的效果：

在vue組件中使用this.dispatch(AppController.create,{...args})，返回值為接口調用的返回值。

關于vue接口管理的設計就到這里，下一篇我將講述如何使用react或rn高效管理調用后端接口。

對于vuex和redux不熟的童鞋

趕緊去學

別在這聽我胡扯。

關于作者：卜壯，普元前端開發工程師，負責Mobile 8.0項目管理平臺前端部分。熟悉ReactNative，目前正在學習Vue，大前端技術探求者。

關于EAWorld：微服務，DevOps，數據治理，移動架構原創技術分享。

總結

以上是生活随笔為你收集整理的vuex 编译项目_俺咋能看懂公司前端项目？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。