vuex結合axios非同步請求數據的封裝

首先, 概括下 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, 請求失敗)

在頁面調用如下: