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

Question

序言

我完全被这个难住了。答案很明显，我很确定，但我看不到。

问题：

我无法使用 Axios 响应写入我的 vuex 存储。我已经阅读并尝试了 async/await，认为我对 Promise 有很好的理解，并逐字复制了示例。没有骰子。

这是我的 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。 提前谢谢你。

---

好的，我这样做是为了根据下面的 cmets 进一步测试：

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
}

当这个action被调度时，store值被成功地变异为“crackers”。

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