Computed Getter 导致最大堆栈大小错误

Question

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

向用户询问 ID。
从外部 API
在 Vuex 中存储 ID/URL（约会）
向用户显示呈现的 URL 他们在 iFrame 中输入的 ID（从 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);             
    }
}

Answer 1

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

我还创建了一个单独的突变来更新 selectedAppointment 对象，因为用户请求不同的 URLs 所以，如果 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
  }
}

感谢大家的帮助。

Computed Getter 导致最大堆栈大小错误

Computed Getter causes maximum stack size error

vue.js

vuejs2

nuxt.js