【问题标题】:Why is my payload undefined when I have a commit in an axios call当我在 axios 调用中有提交时,为什么我的有效负载未定义
【发布时间】:2020-08-13 18:01:35
【问题描述】:

我在我的 vuex 存储中有一个动作,它发出一个 post 调用并将数据响应提交到一个新数组。

我遇到的问题是,当我在 axios 响应中激活提交调用时,我的有效负载未定义。当我把它拿出来时,有效载荷有正确的数据。

这是带有提交的调用:

async addToCategories ({ commit },categories, payload) {
        //commit('createCategories', categories);
        const  formData = new FormData();
        formData.append('CategoryName', payload);

        await axios({
                method: 'post',
            url: 'https://localhost:5001/api/Categories',
            data: formData,
            headers: { 'Content-Type': undefined }
            })
            .then((response) =>  {
                console.warn('Axios response', response);
                commit('createCategories', response.data.Categories);
            })
            .catch((response) => {
                console.warn(response);
            });

      }

我无法理解或弄清楚为什么当我在操作中有提交调用时有效负载未定义,但填充时没有提交。有没有办法可以做到这一点并使有效负载数据能够提交到后端,或者我如何将其分开以获得我需要的结果?

我也尝试了对提交的变更进行分派,但有效负载再次未定义。

任何建议将不胜感激。

更新: axios 响应数据的屏幕截图

【问题讨论】:

  • console.warn('Axios response', response); 在控制台中打印什么?如果定义了response.data,你能不能也提供一下?
  • 一个 Vuex 动作只需要两个参数,上下文和有效负载。您目前有 3 个。您不能将多个参数传递给一个动作,而是需要将它们包装在一个对象中。

标签: vuejs2 axios vuex


【解决方案1】:

我通过从操作中取出类别参数来解决问题,现在所有工作都按预期工作。感谢您查看它


async addToCategories ({ commit }, payload) {
        //commit('createCategories', categories);
        const  formData = new FormData();
        formData.append('CategoryName', payload);

        await axios({
                method: 'post',
            url: 'https://localhost:5001/api/Categories',
            data: formData,
            headers: { 'Content-Type': undefined }
            })
            .then((response) =>  {
                console.warn('Axios response', response);
                commit('createCategories', response.data.Categories);
            })
            .catch((response) => {
                console.warn(response);
            });

      }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-01-23
    • 2018-11-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多