计算的Getter导致最大堆栈大小错误

问题描述 投票:0回答:1

我正在尝试在Nuxt中实现以下逻辑:

  1. 询问用户是否有ID。
  2. 从外部API检索与该ID关联的URL
  3. 将ID / URL(约会)存储在Vuex中
  4. 向用户显示在iFrame中输入的ID的呈现URL(从Vuex商店检索)

我目前遇到的问题是,重复调用存储中的getUrl getter方法,直到超出最大调用堆栈,我无法解决原因。它只是从页面中的计算函数调用,所以这意味着计算函数也被重复调用,但是,我再也无法弄清楚原因。

在我的Vuex商店index.js我有:

export const state = () => ({
  appointments: {}
})

export const mutations = {
  SET_APPT: (state, appointment) => {
    state.appointments[appointment.id] = appointment.url
  }
}

export const actions = {
  async setAppointment ({ commit, state }, id) {
    try {
      let result = await axios.get('https://externalAPI/' + id, {
        method: 'GET',
        protocol: 'http'
      })
      return commit('SET_APPT', result.data)
    } catch (err) {
      console.error(err)
    }
  }
}

export const getters = {
  getUrl: (state, param) => {
    return state.appointments[param]
  }
}

在我的页面组件中,我有:

<template>
    <div>
        <section class="container">
            <iframe :src="url"></iframe>
        </section>
    </div>
</template>

<script>
export default {
    computed: {
        url: function (){
            let url = this.$store.getters['getUrl'](this.$route.params.id)
            return url;
        }
    }
</script>

setAppointments操作是从页面中的单独组件调用的,该组件通过onSubmit方法向用户请求ID:

data() {
  return {
    appointment: this.appointment ? { ...this.appointment } : {
                    id: '',
                    url: '',
                },
                error: false
     }
},
methods: {
  onSubmit() {
    if(!this.appointment.id){
      this.error = true;
    }
    else{
      this.error = false;
      this.$store.dispatch("setAppointment", this.appointment.id);                     
      this.$router.push("/search/"+this.appointment.id);             
    }
}
vue.js vuejs2 nuxt.js
1个回答
0
投票

我不是100%肯定导致多次通话的原因。但是,正如评论中所建议的,我现在已经实现了一个我保持最新的selectedAppointment对象

我还创建了一个单独的变异来更新selectedAppointment对象,因为用户请求不同的URL,因此,如果已经检索到URL,我可以使用此变异来切换所选的。

SET_APPT: (state, appointment) => {
    state.appointments = state.appointments ? state.appointments : {}
    state.selectedAppointment = appointment.url
    state.appointments = { ...state.appointments, [appointment.appointmentNumber]: appointment.url }
},
SET_SELECTED_APPT: (state, appointment) => {
    state.selectedAppointment = appointment.url
}

然后getUrl getter(将其名称更改为url)看起来像:

export const getters = {
  url: (state) => {
    return state.selectedAppointment
  }
}

谢谢你的帮助。

© www.soinside.com 2019 - 2024. All rights reserved.