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

我试图在Nuxt中实现以下逻辑：

向用户询问ID

从外部API检索与该ID关联的URL

将ID/URL（约会）存储在Vuex中

在iFrame中向用户显示其输入ID的呈现URL（从Vuex存储检索）

我目前遇到的问题是，存储中的getUrl getter方法会被反复调用，直到超过最大调用堆栈，我无法找出原因。它只从页面中的computed函数调用，因此这意味着computed函数也会被重复调用，但我还是不明白为什么

在我的Vuex store 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>

---

我不能100%确定是什么原因导致了多次通话。然而，正如评论中所建议的，我现在已经实现了一个SelectedAppoiment对象，我可以随时更新它

我还创建了一个单独的变体，用于在用户请求不同的URL时更新SelectedAppoiment对象，因此，如果已经检索到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（将其名称更改为justURL）看起来就像：

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

---

谢谢你们的帮助。

你们能给我看看你们的“getUrl”getter吗？因为我在上面的商店里看不到。似乎您的模式应该是错误的，因为您这样做了。$store.getters['getUrl']（this.$route.params.id），但它是一个函数调用，getter不应该是一个函数调用，而应该只是一个引用。如果我是你，我会创建一个SelectedAppoimment状态。@MátéWiszt在某些情况下，你可以将参数传递给getting，而不是在存储中使用辅助筛选值。用getter更新。selectedAppointment状态是什么样子的？如果您想将其作为一个getter，我建议您这样做：不创建约会对象，而是像这样重构它：SET_APPT：（state，appointment）=>{state.selectedAppointment=appointment.url}。当然，如果您愿意，也可以在相同的状态下说。appointment[appointment.id]=appointment.url，这样您也可以保留该对象

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