在组件上下文中获取vuex操作响应对象

Question

我正试图获得使用axios调用vuex操作所产生的响应对象，我需要在对象中得到响应，但由于某种原因，它显示未定义。

在我的组件方法中：

mounted()
{
console.log(this.$options.name+' component successfully mounted');
this.$store.dispatch(this.module+'/'+this.action, this.payload)
.then((response) => 
{ 
console.log(response);
this.items = response.data.data;
this.pagination = response.data.pagination;
});
},

我的vuex操作：

list({ commit }, payload)
{
commit( 'Loader/SET_LOADER', { status:1 }, { root: true });
return axios.get('/api/posts', { params: payload })
.then((response) => {
commit('Loader/SET_LOADER', { status:2, response:response }, { root: true });
console.log(response);
commit('SET_POSTS',  response.data.data.data );
commit('SET_PAGINATION',  response.data.pagination );
})
.catch((error) => {
commit('Loader/SET_LOADER', { status:3, errors: error }, { root: true });
throw error;
});
},

使用vuex状态不是一个选项，我想使用组件数据属性项和分页。

Answer 1

返回promise以获取组件中的响应

list({ commit }, payload)
{
commit( 'Loader/SET_LOADER', { status:1 }, { root: true });
return new Promise((resolve,reject)=>{
axios.get('/api/posts', { params: payload })
.then((response) => {
commit('Loader/SET_LOADER', { status:2, response:response }, { root: true });  
console.log(response);
commit('SET_POSTS',  response.data.data.data );
commit('SET_PAGINATION',  response.data.pagination );
resolve(response);
})
.catch((error) => {
commit('Loader/SET_LOADER', { status:3, errors: error }, { root: true });           reject(error);
throw error;
});
})
},

使用async

async list({commit}, payload) {
commit('Loader/SET_LOADER', {status: 1}, {root: true});
try {
let response = await axios.get('/api/posts', {params: payload});
commit('Loader/SET_LOADER', {status: 2, response: response}, {root: true});
console.log(response);
commit('SET_POSTS', response.data.data.data);
commit('SET_PAGINATION', response.data.pagination);
return response;
} catch (e) {
commit('Loader/SET_LOADER', {status: 3, errors: error}, {root: true});
throw error;
}
}