我有一个包含一些帖子的博客。当您单击预览时,您将重定向到页面帖子。
在帖子页面上,我使用 getter 来加载正确的帖子(我使用 find
函数返回 object.name
,它对应于数组中的正确对象对象)。
const state = {
ricettario: [], // data that contains all recipes (array of objects)
}
const actions = {
// Bind State and Firestore collection
init: firestoreAction(({ bindFirestoreRef }) => {
bindFirestoreRef('ricettario', db.collection('____').orderBy('data'))
})
const getters = {
caricaRicetta(state) {
console.log('Vuex Getter FIRED => ', state.ricettario)
return nameParamByComponent => state.ricettario.find(ricetta => {
return ricetta.name === nameParamByComponent
})
}
}
在组件中,我在计算属性
中调用getter
computed: {
...mapGetters('ricettaStore', ['caricaRicetta']),
ricetta() {
return this.caricaRicetta(this.slug) // this.slug is the prop of the URL (by Router)
}
}
一切都以正确的方式进行,但是当我在 POST PAGE 中重新加载页面时, setter/getter 将触发 2 次:
1.返回错误,因为状态为null
2.返回正确的对象
//下面的屏幕
因此,从前面看,一切正常,但在控制台和应用程序中却完全不行。
我认为正确的方法是在created
钩子(Hook)中调用getter。我要改变什么?这是计算的 prop、getters 还是 state 的问题?
发布页面:
<template>
<div v-if="ricetta.validate === true" id="sezione-ricetta">
<div class="container">
<div class="row">
<div class="col s12 m10 offset-m1 l8 offset-l2">
<img
class="img-fluid"
:src="ricetta.img"
:alt="'Ricetta ' + ricetta.titolo"
:title="ricetta.titolo"
/>
</div>
</div>
</div>
</div>
<div v-else>
...
</div>
</template>
最佳答案
您正在尝试验证
未定义的属性。所以你需要先检查ricetta
。
尝试这样:
<div v-if="ricetta && ricetta.validate === true" id="sezione-ricetta">
关于javascript - 页面重新加载时,Vue getter 返回未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61077415/