Получение ошибки при рендеринге: «TypeError: Невозможно прочитать свойство 'title' of undefined" при рендеринге CourseDescriptionPageComponent

Question

Вот как выглядит CourseDescriptionPage.vue

  import CourseCover from './CourseDescription/CourseCover.vue'
  import WhyJoin from './CourseDescription/WhyJoin.vue'
  import CourseStructure from './CourseDescription/CourseStructure.vue'
  export default {
    props: ['id'],
    data () {
      return {
        hasDetails: false
      }
    },
    created () {
      this.$store.dispatch('loadCourseDetails', this.id).then(() => {
        this.hasDetails = true
      })
    },
    computed: {
      course () {
        return this.$store.state.courseDetails[this.id]
      }
    },
    components: {
      CourseCover,
      WhyJoin,
      CourseStructure
    },
    name: 'CourseDescriptionPage'
  }

<template>
  <div v-if="hasDetails">
    <course-cover :courseTitle="course.title" :courseDuration="course.duration"></course-cover>
    <why-join :courseTitle="course.title" :courseJobs="course.jobs"></why-join>
    <course-structure :lectureList="course.lectureList"></course-structure>
  </div>
</template>

Вот как выглядит мой магазин

import Vuex from 'vuex'
import * as firebase from 'firebase'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
      courseDetails: {},
      loading: false
    },
    mutations: {
      setCourseDetails (state, payload) {
        const { id, data } = payload
        state.courseDetails[id] = data
      },
      setLoading (state, payload) {
        state.loading = payload
      }
    },
    actions: {
      loadCourseDetails ({commit}, payload) {
      commit('setLoading', true)
      firebase.database().ref(`/courseStructure/${payload}`).once('value')
        .then((data) => {
          commit('setCourseDetails', {
            id: payload,
            data: data.val()
          })
          commit('setLoading', false)
        })
        .catch(
          (error) => {
            console.log(error)
            commit('setLoading', false)
          }
        )
    }
  }

Вот как выглядит мой CourseCover.vue

  export default {
    props: {
      courseTitle: {
        type: String,
        required: true
      },
      courseDuration: {
        type: String,
        required: true
      }
    },
    name: 'CourseCover'
  }

<template>
  <v-jumbotron 
    src="./../../../static/img/course_cover_background.png">
    <v-container fill-height> 
      <v-layout align-center>
        <v-flex>
          <h3>{{ courseTitle }}</h3>
          <span>{{ courseDuration }}</span>
          <v-divider class="my-3"></v-divider>
          <v-btn large color="primary" class="mx-0" @click="">Enroll</v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </v-jumbotron>
</template>

Я думаю, что-то не так с тем, как я использую здесь реквизит, но я не мог понять. Данные загружаются в хранилище с помощью базы данных, которую я знаю точно, потому что они отображаются в инструментах разработчика Vue, но я просто не мог понять, почему Vue жалуется на это. Заранее спасибо.

Answer 1

курс не определен при инициализации компонента, поэтому вы должны вернуть пустой объект:

computed: {
  course () {
    return this.$store.state.courseDetails[this.id] || {}
  }
},