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

Posted 2023-03-16

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

【英文标题】：Mutate vuex store state with action within axios response - commit does not work

【发布时间】：2018-11-08 17:56:35

【问题描述】：

序言

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

问题：

我无法使用 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 对象。

【问题讨论】：

提交（'setDays_'，响应）。 setDays_ 是类型错误吗？

我不确定你是否可以在一个动作中提交多个

即使我删除了第一个，第二个也不会提交。一定有一些潜在的配置问题。我将在 vue-cli 的香草应用程序中重建并从那里开始。感谢您的帮助。

【参考方案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 存在潜在问题。使用你的方法（这是有道理的，谢谢）我得到：“Uncaught (in promise) TypeError: Cannot read property 'data' of undefined”。

尝试使用第二个代码示例（没有对象解构）和console.log('Response:', response) 在那里你可以检查response.data 是否存在