Question

我计算出的组件如下：

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 })
  },
}

我该如何解决这个问题？

在计算中是否不能运行异步？

Answer 1

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

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

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

1 个答案: