Vuex 数据管理与Promise及async/await实践-CSDN博客

本文链接：https://blog.csdn.net/weixin_63471708/article/details/123646768

本文介绍了Vuex中如何处理多层解构和数据更新，重点展示了如何在mutations中正确更新对象以触发Vue响应式更新。同时，讲解了Promise用于解决回调地狱的问题，以及async/await的使用方法，包括await后的promise对象处理和async函数的异步特性。通过一个axios获取数据并使用Vuex更新状态的示例，进一步说明了这些概念在实际开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const {data: {data: { channels: payload },},} = await
axios.get("");
多层解构，重命名

import axios from "axios"

export default {
namespaced: true,
state: {
allData: {}
},
mutations: {
updateAllData (state, {id, list}) {
// allData这个对象这种赋值方式是不会改变地址的
// vue监听对象，需要发现地址改变，才会动态响应
// state.allData['key'] = [1, 2, 3]

// id: []
state.allData = {...state.allData, [id]: list}
}
},
actions: {
async getAllData (context, cataId) {
if(context.state.allData[cataId]) {
return
}
const data = await axios.get(`/v1_0/articles?
channel_id=${cataId}&timestamp=${Date.now()}&with_top=1`)

console.log(data)
const list = data.data.data.results
context.commit('updateAllData',{id:cataId,list:list})
}
}
}
promise:

promise可以解决回调地狱的问题。

// const p = new Promise(function (resolve, reject) {
// reject('失败')
// })
// const p = Promise.reject('失败') //相当于上面的简写
const p = Promise.reject('失败')

p.then(function (res) {
console.log(res)
}, function(err) {
console.log(err + '！！！')
})
async /await：
await 表示强制等待的意思，await关键字的后面要跟一个promise对象，它总是等到该promise对象resolve成功之后执行，并且会返回resolve的结果

由于await的强制等待，所以必须要求使用await的函数必须使用async标记， async表示该函数就是一个异步函数，不会阻塞其他执行逻辑的执行

var axios = {
get() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
const obj = {
obj: {
data: {
info: '信息'
}
}
}

resolve(obj)
}, 500)
})
}
}

async function testFn () {
const { obj: {data} } = await axios.get()

console.log(data)

console.log(456)
}

testFn()