Vue getter возвращает неопределенное значение при перезагрузке страницы - PullRequest
Новая
       50

Vue getter возвращает неопределенное значение при перезагрузке страницы

0 голосов
/ 07 апреля 2020

У меня есть блог с некоторыми постами. При нажатии на предварительный просмотр вы будете перенаправлять на страницу сообщения. На странице поста я использую метод получения, чтобы загрузить правильный пост (я использую функцию 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
        })
    }
}

В компоненте я вызываю метод получения в computed property

computed: {
    ...mapGetters('ricettaStore', ['caricaRicetta']),
    ricetta() {
      return this.caricaRicetta(this.slug) // this.slug is the prop of the URL (by Router)
    }
  }

Все происходит правильно, но когда я перезагружаю страницу в POST PAGE, метод получения запускается 2 раза:
1. вернуть ошибку, так как состояние нулевое
2. вернуть правильный объект
// экран ниже

enter image description here

Таким образом, все отлично работает спереди, но не в консоли и не в приложении.
Я думаю, что правильный способ - вызывать геттеры в хуке created. Что я должен изменить? Это проблема с вычисляемым пропом, добытчиком или состоянием?

POST PAGE: 

<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>

Ответы [ 3 ]

1 голос
/ 07 апреля 2020

Вы пытаетесь validate неопределенное свойство. Поэтому вам нужно сначала проверить ricetta.

Попробуйте вот так: 

<div v-if="ricetta && ricetta.validate === true" id="sezione-ricetta">
1 голос
/ 07 апреля 2020

Синхронизация базы данных асинхронная, ricettario изначально пустой массив. Вычисленное значение пересчитывается после завершения синхронизации и заполнения массива ricettario, компонент обновляется.

Даже если ricettario не был пустым, find может вернуть undefined, если ничего не найдет. Это должно быть обработано, когда используется ricetta: 

<div v-if="ricetta && ricetta.validate" id="sezione-ricetta">
0 голосов
/ 07 апреля 2020

Журнал ошибок довольно явный, где-то в вашем Ricetta шаблоне компонента есть xxx.validate, но xxx не определено.

Из-за этого ваше приложение падает и перестает работать. Я сомневаюсь, что это имеет какое-либо отношение к Vuex

...