首先, 概括下 vuex基本使用流程為: 在action中分發(fā)異步請求, 在異步回調(diào)中提交mutation,在mutation中修改state, 使用getters對state的值進(jìn)行計算封裝.
為了能夠很好的隔離頁面view視圖與數(shù)據(jù)的請求, 同時在使用vuex的action分發(fā)異步請求后,能夠接收回調(diào),進(jìn)行了以下封裝:
一. http的封裝
http模塊包含3個文件,config.js?,?http.js?,api.js
config.js?封裝網(wǎng)關(guān)域名,及所有接口的方法名
http.js封裝axios基本的get, post請求
api.js封裝接口名及對應(yīng)的傳輸字段,回調(diào)響應(yīng)數(shù)據(jù)
二. vuex模塊的封裝
vuex通過action異步請求,為了回調(diào)執(zhí)行狀態(tài),需在action中返回promise,針對該異步請求的封裝, 分為2種情況:
1. view層需要渲染的數(shù)據(jù),例如:加載用戶基本信息,加載商品列表,訂單列表
異步請求后,需要提交mutation,修改state,使用getters計算
2. 執(zhí)行某個功能動作,例如點(diǎn)贊,添加,刪除
異步請求后,不需要提交mutation,不需要使用state中的數(shù)據(jù)
下圖的獲取用戶基本信息屬于情況1, 執(zhí)行點(diǎn)贊動作屬于情況2
為了處理以上兩種情況,做了以下封裝 (假設(shè):code=1,請求成功, code=0, 請求失敗)
在頁面調(diào)用如下:
