javascript - 获取组件上下文中的 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;
          });
       })
    },

Using 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;
    }
}