【发布时间】：2020-08-23 20:35:05
【问题描述】：
所以问题在于，除了一个特定的属性之外，所有在存储中有 axios 调用的计算属性都运行良好。 GetSong.owner 未定义，但问题是数据在网页上正确显示。该错误仅在刷新时出现，所以我猜它与在存储中的 axios 调用完成之前加载的 dom 有关。有任何想法吗？这是代码：
<div>
<div class="song">
<div class="song_container">
<div class="song_info">
<h1 v-if="getSong" class="song_info-author">{{ getSong.owner.profile[0].name ? getSong.owner.profile[0].name : '' }}</h1>
<h1 class="song_info-title">{{ getSong.title }} </h1>
<h1 class="song_info-genre">{{ getSong.genre }} </h1>
</div>
<div class="song_playback">
<app-player></app-player>
</div>
<img v-bind:class="{'liked': getLiked}" @click.prevent="likeUnlikeSong"
class="song_like" src="../assets/icons/favourite.svg" alt="" srcset="">
</div>
<app-comment></app-comment>
</div>
</div>
</template>
<script>
import Comment from "../components/Comment.vue";
import Player from "../components/Player.vue";
export default {
components : {
appComment : Comment,
appPlayer : Player
},
computed: {
getSong(){
return this.$store.getters.getSong
},
getLiked() {
return this.$store.getters.getLiked
},
getProfile() {
return this.$store.getters.getProfile
},
getImage() {
return this.$store.getters.getImage
}
},
methods : {
likeUnlikeSong (){
if(!this.getLiked){
this.$store.dispatch('LIKE_SONG',this.$route.params.id)
} else {
this.$store.dispatch('UNLIKE_SONG',this.$route.params.id)
}
},
},
created() {
this.$store.dispatch('GET_SONG',this.$route.params.id)
this.$store.dispatch('CHECK_LIKE',this.$route.params.id)
}
}
</script>
<style lang="scss" scoped>
@import '../scss/components/song';
</style>
商店：
const song = {
state : {
song : {},
songs: [],
my_songs: [],
liked: false
},
getters : {
getSong : (state) => {
return state.song
},
getAllSongs: (state) => {
return state.songs
},
getLiked : (state) => {
return state.liked
},
getMySongs : (state) => {
return state.my_songs
}
},
mutations : {
setSongOne : (state,song) => {
state.song = song
},
removeSongOne : (state) => {
state.song = null
},
setAllSongs : (state,songsArray) => {
state.songs = songsArray
},
emptyAllSongs: (state) => {
state.songs = []
},
setLike: (state,boolean) => {
state.liked = boolean
},
setMySongs : (state,songs) => {
songs.forEach((song) => {
state.my_songs.push(song)
})
},
reset: (state) => {
state.song = {},
state.songs = [],
state.my_songs = [],
state.liked = false
}
},
actions : {
UPLOAD : ({commit}, payload) => {
return new Promise((resolve,reject) => {
Axios.post('/song',payload)
.then((success) => {
resolve()
}).catch((error) => {
reject(error)
})
})
},
GET_SONG: ({commit}, payload) => {
Axios.get(`/song/${payload}`).then(({data,status}) => {
if(status===200){
commit('setSongOne',data)
}
}).catch((error) => {
})
},
GET_MY_SONGS : ({commit,getters}) => {
if(getters.getMySongs.length == 0){
return new Promise((resolve,reject) => {
Axios.get('/song/me').then(({data,status}) => {
if(status=== 200) {
commit('setMySongs',data)
resolve()
}
}).catch((error) => {
reject(error)
})
})}
},
GET_ALL_SONGS: ({commit}) => {
let songs = []
return new Promise((resolve,reject) => {
Axios.get('/song').then(({data,status}) => {
if(status===200) {
songs.push(data)
commit('setAllSongs',songs)
resolve()
}
}).catch((error) => {
reject(error)
})
})
},
EMPTY_ALL_SONGS: ({commit}) => {
commit('emptyAllSongs')
},
LIKE_SONG : ({commit},payload) => {
return new Promise((resolve,reject) => {
Axios.post(`/song/${payload}/like`).then(({status}) => {
if(status===200) {
commit('setLike',true)
resolve()
}
}).catch((error) => {
reject(error)
})
})
},
UNLIKE_SONG : ({commit},payload) => {
return new Promise((resolve,reject) => {
Axios.post(`/song/${payload}/unlike`).then(({status}) => {
if(status===200) {
commit('setLike',false)
resolve()
}
}).catch((error) => {
reject(error)
})
})
},
CHECK_LIKE: ({commit},payload) => {
return new Promise((resolve,reject) => {
Axios.get(`/song/${payload}/check_like`).then(({status,data}) => {
if(status===200) {
commit('setLike',data.liked)
resolve()
}
}).catch((error) => {
reject(error)
})
})
}
}
}
export default song
【问题讨论】：
标签： javascript vue.js axios