Computed Getter вызывает ошибку максимального размера стека

Question

Я пытаюсь реализовать следующую логику в Nuxt:

1. Запросить у пользователя идентификатор.
2. Получить URL-адрес, связанный с этим идентификатором, из внешнего API
3. Сохраните идентификатор / URL (встречу) в Vuex
4. Отображение пользователю отображенного URL-адреса для введенного им идентификатора в iFrame (получено из магазина 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:

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

Answer 1

Я не уверен на 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 (изменивший название на просто url) выглядит просто:

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

Спасибо за вашу помощь, ребята.