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, 請求失敗)

在頁面調用以下: