Question

序言

我完全被这个难过了。这是我在这里问过的第一个问题，尽管读了这个网站超过7年。答案很明显，我确信，但我看不到它。

问题：

我无法使用Axios响应写入我的vuex商店。我已经读过并试过async / await，以为我对承诺有了很好的把握，并且逐字复制了例子。没有骰子。

这是我的mutator，它在axios之外传递有效载荷时起作用：

mutations: {
    setDays (state, payload) {
        state.savedDays = payload
    }
}

此操作是为调试目的而创建的，使用“cheese”一词正确更新商店，并将预期的响应对象记录到控制台：

getDays ({commit}) {
    axios.get('/days/')
    .then( (response) => {
        console.log(response.data)
    })
    commit('setDays', "cheese")
}

此操作不会更新商店，但仍会正确记录到控制台：

getDays ({commit}) {
    return axios.get('/days/')
    .then( (response) => {
        // response object removed for debugging
        commit('setDays', "cheese")
        console.log(response.data)
    }
})

我已经在这里阅读了Vuex文档和许多其他解决方案，尝试过很多东西，包括以下内容（不起作用）：

async getDays ({commit}) {
    const response = await axios.get('/days/')
    commit('setDays', response)
})

我没有收到任何错误消息，请使用chrome vue-devTools。提前谢谢。

好的，我根据以下评论进行了进一步测试：

async getDays ({commit}) {
    commit('setDays', "crackers")
    const response = await axios.get('/days/byType/30/1')
    console.log("Response:", response.data)
    commit('setDays', response.data)
    return response
}

调度此操作后，商店值会成功变为“破解者”。

console.log成功记录响应对象。

第二次提交什么都不做，即使我尝试提交字符串而不是response.data对象。

Answer 1

您接近第三和第四个代码示例。 axios.get()返回一个承诺。因此，您必须使用async await或.then。要使您的第四个示例正常工作，您所要做的就是提交response.data

async getDays ({commit}) {
    const response = await axios.get('/days/')
    commit('setDays', response.data)
})

要返回该值，请使用以下行

async getDays ({commit}) {
    const response = await axios.get('/days/')
    commit('setDays', response.data)
    return response.data
})

仅供参考，您也可以使用Object destructuring

const { data } = await axios.get('/days/')
commit('setDays', data)
return data

使用axios响应中的操作来变异vuex存储状态 - 提交不起作用

1 个答案: