這篇文章將為大家詳細(xì)講解有關(guān)vue組件內(nèi)如何獲取actions的response方式，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。
最近使用在學(xué)習(xí)使用vuex，想利用vuex集中管理狀態(tài)。在和后臺(tái)進(jìn)行數(shù)據(jù)交互的時(shí)候，必然會(huì)涉及接口的調(diào)用，此類異步操作，通常寫在action里面：
重慶分公司
重慶分公司
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use('Vuex');
const actions = {
getComplete ({}) {
return new Promise((resolve, reject) => {
Vue.http.get('XXXXXX').then((response) => {
resolve(response);
}).catch((response) => {
reject(response);
});
});
}
}
export default new Vuex.Store({
actions
})這里將接口的請(qǐng)求放置在promise中，利用promise異步的特性，可以在子組件中獲取到接口調(diào)用成功后返回的參數(shù)：
export default {
......
created: function() {
this.$store.dispatch('getComplete').then(response => {
......
}).catch(response => {
......
})
}
}除了這種方式，也可以使用mapActions 輔助函數(shù)將組件的 methods 映射為 store.dispatch 調(diào)用（需要先在根節(jié)點(diǎn)注入 store）。
關(guān)于“vue組件內(nèi)如何獲取actions的response方式”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
