在组件上下文中获取 vuex 动作响应对象答案

【问题标题】：Get vuex action response object in component context在组件上下文中获取 vuex 动作响应对象
【发布时间】：2020-04-13 02:55:16
【问题描述】：

我正在尝试获取使用 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 状态不是一个选项，我想使用组件数据属性项和分页来代替。

【问题讨论】：

原因是你没有返回值，所以它是未定义的。从动作返回值并不常见，因为它应该在存储中设置值，这就是它的作用。您可以添加 return response 或从 this.$store 读取值。

标签： javascript vue.js

【解决方案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;
    }
}

【讨论】：

这是 Promise 构造函数反模式。一个承诺已经返回，return axios.get(,..)
你试过了吗？使用Promise 将承诺返回给组件是可行的，否则它会在组件中显示undefined。
它工作但效率低下。你忘了reject，它会卡在错误上。不需要尝试看看发生了什么。代码可以用简单的return response 来修复。
reject 已经存在于catch 部分中。我忘记格式化了。
@EstusFlask 添加有效的解决方案将不胜感激。谢谢。