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

【问题标题】：Computed Getter causes maximum stack size errorComputed Getter 导致最大堆栈大小错误
【发布时间】：2018-09-03 11:14:36
【问题描述】：

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

向用户询问 ID。
从外部 API 检索与该 ID 关联的 URL
在 Vuex 中存储 ID/URL（约会）
向用户显示他们在 iFrame 中输入的 ID 的呈现 URL（从 Vuex 商店检索）

我目前遇到的问题是 store 中的 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);             
    }
}

【问题讨论】：

你能展示你的'getUrl'吸气剂吗？因为我在上面的商店里看不到它。看来您的模式应该是错误的，因为您这样做了 this.$store.getters['getUrl'](this.$route.params.id) 但它是一个函数调用，getter 不应该是一个函数调用，只是一个参考.如果我是你，我会创建一个 selectedAppointment 状态。
@MátéWiszt 在某些情况下，您可以将参数传递给获取，而不是在他的存储中使用辅助过滤值。 github.com/vuejs/vuex/issues/688#issuecomment-285869557
更新了 getter。 selectedAppointment 状态会是什么样子？
如果你想保持它作为吸气剂，我建议你遵循这个：github.com/vuejs/vuex/issues/688#issuecomment-380509722
我会这样做：不创建约会对象，而是像这样重构它：SET_APPT：（状态，约会）=> {state.selectedAppointment =约会.url}。当然，如果你愿意，你也可以在同一个突变中说 state.appointments[appointment.id] =ointment.url 这样你也将保留对象

标签： vue.js vuejs2 nuxt.js

【解决方案1】：

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

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

感谢你们的帮助。

【讨论】：