在 axios 响应中使用操作改变 vuex 存储状态 - 提交不起作用

Question

序言

我完全被这个难住了。答案是显而易见的，我敢肯定，但我看不到。

问题：

我无法用 Axios 响应写信到我的 vuex 商店。我已经阅读并尝试了异步/等待，认为我已经很好地掌握了承诺，并逐字复制了示例。没有骰子。

这是我的突变器，当在 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
}

调度此操作时，存储值成功突变为"饼干"。

控制台.log成功记录响应对象。

第二次提交不执行任何操作，即使我尝试提交字符串而不是 response.data 对象也是如此。

Answer 1

您的第三个和第四个代码示例已接近。axios.get()返回一个承诺。所以你要么必须使用asyncawait，要么.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
})

---

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

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