报错信息为 无法获取到program.teacher 返回undefined 但是奇怪的是 program.title 都能获取到。。唯独获取不到多层的。。

模拟的数据

{
  "program": {
    "cover": "http://img1.3lian.com/2015/a1/28/d/113.jpg",
    "title": "后期修图技巧",
    "counts": 1960,
    "rating": 3,
    "price": 267.00,
    "score": 4.8,
    "video": "http://qiniu.vmovier.vmoviercdn.com/58f5ca1aa99c9.mp4",
    "teacher": {
      "avatar": "http://img5.duitang.com/uploads/item/201603/10/20160310124134_Aiuwf.jpeg",
      "nickName": "Summer",
      "introduct": "自由摄影师，摄影师"
    },
  }
}

store.js

import api from '../../api/program'

const state = {
  program: {
    list: [],
    detail: {}
  }
}

const getters = {
  detail: state => state.program.detail
}

const mutations = {
  // 获取课程详细信息
  GET_PROGRAM_DETAIL (state, res) {
    console.log('***',res)
    state.program.detail = res
  }
}

const actions = {
  getProgramDetail( { commit } ) {
    api.getProgramDetail(res => {
      commit('GET_PROGRAM_DETAIL', res)
    })
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

index.vue 展示页面

<template>
  <div class="container">
    <intro-panel :bg="program.cover"
                 :title="program.title"
                 :count="program.counts"
                 :rating="program.rating"
                 :score="program.score" />
  
    <section class="content">
      <sticky>
        <tab :line-width=2
             active-color='#ccac7b'
             v-model="index">
          <tab-item class="vux-center"
                    :selected="demo2 === item"
                    v-for="(item, index) in list2"
                    @click="demo2 = item"
                    :key="index">{{item}}</tab-item>
        </tab>
      </sticky>
      <section class="introduct"
               v-if="index === 0">
        <!-- 课程介绍页面 -->
        <Card :title="program.title">
          <div slot="content">
            <div class="video">
              <video style="background-color:#000;width:100%;height:100%"
                     :src="program.video"></video>
            </div>
          </div>
        </Card>
  
        <Card title="授课教师">
          <div class="teacher"
               slot="content">
            <Avatar :bg="program.cover"
                    width="60" />
            <div class="userInfo">
              <h1 class="name">{{ program.teacher ? program.teacher.nickName : '' }}</h1>
              <p class="intro">{{ program.teacher ? program.teacher.introduct : '' }}</p>
            </div>
            
          </div>
        </Card>
      </section>
      
    </section>
    <pay-bar price="267.00" />
  </div>
</template>

<script>
  // import ***
  export default {
    created () {
      this.$store.dispatch('getProgramDetail')
    },
    computed: mapGetters({
      program: 'detail'
    })
  }
</script>