vuex 异步获取数据,却无法渲染页面
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
报错信息为 无法获取到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>