我是一名剛步入社會的有志青年開發者。
在校學了三年的後端開發，沒想到剛步入公司幹起了前端工作，華麗的轉變讓我有點猝不及防，誰讓我辣麼優秀！
趁著頭髮茂密，讓我們步入正題！
很有幸進入公司就參與了專案的開發，專案的前端是採用的vue和element框架，我剛拿到公司封裝之後的vue的腳手架翻了翻，瞬間感覺對不起老大，我不配當你小弟，請原諒我猜不透你的心思。何以解憂，唯有度娘。
作為前端開發，避免不了與後台介面打交道，經常要去介面文件或者訪問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.***進行呼叫。
最後達到的效果：
對於vuex和redux不熟的童鞋
趕緊去學
別在這聽我胡扯。
關於作者：卜壯，普元前端開發工程師，負責mobile 8.0專案管理平台前端部分。熟悉reactnative，目前正在學習vue，大前端技術探求者。
關於eaworld：微服務，devops，資料治理，移動架構原創技術分享。
前端學習十一（vuex 專案編譯）
一 vuex 個人理解是多個vue元件資料共享時使用 vuex文件 1 環境準備 1 安裝依賴 npm install vuex s e 2 安裝外掛程式 vue ui中安裝外掛程式vuex 會新建乙個store的資料夾，且main.js也會自動匯入store 2 vuex的核心概念 state g...
專案vuex處理
扒拉乙個專案的vuex看著比較舒服，1 檔名作為module 名 store index.js 新增到vue中 modules d2admin index.js 將檔案內容給模組 modules account.js db.js fullscreen.js gray.js log.js menu.j...
Vuex 專案結構
vuex 並不限制你的 結構。但是，它規定了一些需要遵守的規則 應用層級的狀態應該集中到單個 store 物件中。提交 mutation 是更改狀態的唯一方法，並且這個過程是同步的。非同步邏輯都應該封裝到 action 裡面。只要你遵守以上規則，如何組織 隨你便。如果你的 store 檔案太大，只需...