用axios响应中的动作改变vuex存储状态-提交不起作用

Question

序言

我完全被这件事难住了。答案是显而易见的，我肯定，但我看不出来。

问题是：

我不能给我的vuex商店写信回复Axios。我阅读并尝试过异步/等待，认为我对promise有很好的把握，并逐字复制了例子。没有骰子。

这是我的变种器，它在通过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
}

当这个动作被分派时，存储值成功地变异为“饼干”。

安慰日志成功记录响应对象。

第二次提交什么也不做，即使我尝试提交一个字符串而不是响应。数据对象。

Answer 1

您的第三个和第四个代码示例非常接近<代码>axios。get（）返回一个promise。因此，您必须使用asyncwait或。然后。要使第四个示例正常工作，您所要做的就是提交响应。数据

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
})

仅供参考，您也可以使用对象分解

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