一、問題的起源
最近在做vue.js項目時,遇到了vuex狀態管理action與vue.js方法互相通信、互操作的問題。場景如下圖所示:
二、第一種解決方法
例如,我們在頁面初始化的時候,需要從服務端通過API接口獲取數據,數據獲取成功前需要顯示Loading狀態框,數據獲取完成後,需要將Loading狀態框隱藏。
這是一種相對比較簡單的應用場景,解決起來當然也比較簡單。
我們可以通過state數據字段來實現
,在state中存儲一個loading字段,並設置默認值爲false。
const store = new Vuex.Store({
state: {
loading: false
},
// ......
});
因爲要對state.loading進行操作,所以,我們需要定義一個mutation方法,用於更新loading狀態數據。
const UPDATE_LOADING = 'updateLoading';
const store = new Vuex.Store({
// ......,
mutations: {
updateLoading (state, loading) {
state.loading = loading;
}
},
// ......
});
然後,我們聲明一個action方法,用於從HTTP API獲取數據。
const store = new Vuex.Store({
// ......,
actions: {
fetchData ({ commit }) {
commit(UPDATE_LOADING, true);
axios.get('...', { params: {...} })
.then(res => {
// TODO 解析HTTP響應數據,進行相關的業務邏輯處理
})
.catch(err => {
// TODO 進行相關的錯誤與異常處理
})
.finally(() => {
commit(UPDATE_LOADING, false);
});
}
},
// ......
})
在頁面模板中,我們通過mapActions函數將vuex的action方法映射爲vue.js中對象的方法。
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'fetchData',
// ...
])
}
}
最後,在vue.js的mounted生命週期方法中調用通過mapActions映身的方法fetchData即可。
export default {
// ...,
mounted() {
this.fetchData();
},
// ...
}
三、第二種解決方法
上述的第一種解決方法,可以通過mutation修改state的狀態數據控制UI上的數據渲染。但如果想要將獲取到的結果數據傳到UI組件是不行的,另外,如果想要在調用action方法執行完成後在UI中再去做一些事情也是行不通的。
以前我們知道,異步方法傳遞數據,可以通過回調函數的參數進行傳遞數據,所以,我提到的第二種解決辦法就是通過回調函數實現
的。
const store = new Vuex.Store({
// ......,
actions: {
fetchData ({ commit }, { params, callback }) {
commit(UPDATE_LOADING, true);
axios.get('...', { params })
.then(res => {
callback(res);
})
.catch(err => {
// TODO 進行相關的錯誤與異常處理
})
.finally(() => {
commit(UPDATE_LOADING, false);
});
}
},
// ......
})
四、第三種解決方法
以上兩種方式雖然可以解決某些問題,但解決方法不夠優雅,而且第一種方法具有很大的侷限性。比如,不能回調主界面中的方法執行後續的操作,也不能自由地傳遞參數。第二種方法採用回調可以調用方法,也可以傳參,但callback的調用是同步方式,代碼風格也不是很好。所以,我比較提倡大家使用第三種方法,就是在action調用時返回一個Promise,這樣在主界面就可以拿到這個promise對象,並進行鏈式執行後續的任務,也可以將action異步任務的結果數據傳遞給主UI。
const store = new Vuex.Store({
// ......,
actions: {
fetchData ({ commit }, { params }) {
commit(UPDATE_LOADING, true);
return axios.get('...', { params })
.then(res => {
const { data } = res;
return data;
})
.finally(() => {
commit(UPDATE_LOADING, false);
});
}
},
// ......
})
在主UI中,我們就可以採用如下的方式進行後續的操作。
export default {
// ...,
mounted() {
this.fetchData({ id: 1 })
.then(res => {
// TODO 執行後續的任務
})
.catch(err => {
// TODO 處理異常情況
});
},
// ...
}