首先, 概括下 vuex基本使用流程為: 在action中分發非同步請求, 在非同步回撥中提交mutation,在mutation中修改state, 使用getters對state的值進行計算封裝.
為了能夠很好的隔離頁面view檢視與資料的請求, 同時在使用vuex的action分發非同步請求後,能夠接收回撥,進行了以下封裝:
一. http的封裝
http模組包含3個檔案, config.js , http.js , api.js
config.js 封裝閘道器域名,及所有介面的方法名
http.js 封裝axios基本的get, post請求
api.js 封裝介面名及對應的傳輸欄位,回撥響應資料
二. vuex模組的封裝
vuex通過action非同步請求,為了回撥執行狀態,需在action中返回promise,針對該非同步請求的封裝, 分為2種情況:
1. view層需要渲染的資料,例如:載入使用者基本資訊,載入商品列表,訂單列表
非同步請求後,需要提交mutation,修改state,使用getters計算
2. 執行某個功能動作,例如點贊,新增,刪除
非同步請求後,不需要提交mutation,不需要使用state中的資料
下圖的獲取使用者基本資訊屬於情況1, 執行點贊動作屬於情況2
為了處理以上兩種情況,做了以下封裝 (假設:code=1,請求成功, code=0, 請求失敗)
在頁面呼叫如下:
