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

Question

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

1. 要求用户提供 ID。
2. 从外部 API 检索与该 ID 关联的 URL
3. 将 ID/URL(约会(存储在 Vuex 中
4. 向用户显示他们在 iFrame 中输入的 ID 的呈现 URL(从 Vuex 存储中检索(

我目前遇到的问题是，存储中的 getUrl getter 方法被反复调用，直到超过最大调用堆栈，我无法弄清楚原因。 它仅从页面中的计算函数调用，因此这意味着计算函数也被重复调用，但同样，我无法弄清楚原因。

在我的 Vuex 商店索引中.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);             
}
}

Answer 1

我不是 100% 确定是什么导致了多次调用。 但是，正如评论中所建议的，我现在已经实现了一个 selectedAppointment 对象，我保持最新状态

我还创建了一个单独的突变，用于在用户请求不同的 URL 时更新 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
}
}

谢谢你们的帮助。