javascript - 页面重新加载时，Vue getter 返回未定义

Question

我有一个包含一些帖子的博客。当您单击预览时，您将重定向到页面帖子。在帖子页面上，我使用 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>

Answer 1

您正在尝试验证未定义的属性。所以你需要先检查ricetta。

尝试这样:

<div v-if="ricetta && ricetta.validate === true" id="sezione-ricetta">