为啥计算内部的异步会产生无限循环（vue）？

Posted 2023-02-23

【中文标题】为啥计算内部的异步会产生无限循环（vue）？

【英文标题】：why does async inside computed make infinity loops (vue)?为什么计算内部的异步会产生无限循环（vue）？

【发布时间】：2020-04-14 09:15:41

【问题描述】：

我计算的组件是这样的：

export default 
  computed:  
    dataDoctorPerPage: async function () 
        const start = this.pagination.page * this.pagination.rowsPerPage - this.pagination.rowsPerPage;
        const end = start + this.pagination.rowsPerPage - 1;
        const doctors = this.dataDoctor
        const newDoctors = 
        let key = 0
        for(let item in doctors) 
            if(key >= start && key <= end) 
                for (let i = 0; i < doctors[item].length; i++) 
                    const params = 
                        hospitalId: doctors[item][i].hospital_id,
                        doctorId: doctors[item][i].doctor_id,
                    
                    await this.getDataSchedule(params) /* call async */
                    // console.log(this.dataSchedule)
                
                newDoctors[item] = doctors[item]
            
            key++
        
        return newDoctors
    
  

如果调用的 dataDoctorPerPage 将运行脚本

await this.getDataSchedule(params) 将通过 vuex 存储调用 async/api。我的问题就在那里。当我打电话给await this.getDataSchedule(params) 时，它会不停地循环

我的 vuex 商店是这样的：

const actions = 
  async getDataSchedule ( commit , payload) 
    const result = await api.getDataSchedule(payload)
    const items = result.data
    commit('setDataSchedule',  items: items )
  ,

我该如何解决这个问题？

computed中是否不能运行async？

【问题讨论】：

尝试阅读this和this

@LoiNguyenHuynh 其实我试过了。但都是一样的

【参考方案1】：

计算不应使用async。如果你想这样做，你需要另一个库。 https://alligator.io/vuejs/async-computed-properties/

但是您想要做的是使用异步方法（在组件或存储中）并将数据设置在某处（在组件的数据或存储状态中），然后让您的计算值引用它。

【讨论】：

其实我试过了。但都是一样的

那你的代码有逻辑错误。显示“api”对象和突变。