首页 文章

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

提问于
浏览 次
0

Preamble

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

The Problem:

我无法使用Axios响应写入我的vuex商店 . 我已经阅读并尝试了异步/等待，认为我对承诺有一个很好的把握，并逐字逐句地复制了例子 . 没有骰子 .

这是我的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对象，第二次提交也不会做任何事情 .

vue.js axios vuex

1 回答

  • 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
    回复于

相关问题