我正在尝试在Nuxt中实现以下逻辑:
我目前遇到的问题是,重复调用存储中的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);
}
}
我不是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 getter(将其名称更改为url)看起来像:
export const getters = {
url: (state) => {
return state.selectedAppointment
}
}
谢谢你的帮助。