我正在学习 Vuex，最近我使用它来获取数据。
一切似乎都正常，我可以访问我的电影对象，我可以选择这个对象中的任何电影......但是一旦我想访问其中一个电影中包含的数据，一条错误消息就会唤醒我的控制台。
Vuex：
export default createStore({
state: {
films: []
},
mutations: {
SET_FILMS(state, films) {
state.films = films
}
},
actions: {
fetchFilms({ state, commit }){
services_movieDB.getFilms('')
.then(response => {
commit('SET_FILMS', response.data.results)
})
.catch(error => console.log("error with api call getFilms() in CardFilms", error))
}
}
});
*services_movieDB 是一个使用 Axios 获取数据的服务。为了清楚这个问题，我将省略这部分：它可以工作。
零件：
<template>
<section>
{{ films[currentIndex] }} //it works: no error message
{{ films[currentIndex] }} //it works: but 2 warnings and 1 error message in the console
{{ currentFilm }} //isn't work
</section>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "CardFilms",
data() {
return {
currentIndex: 0,
currentFilm: null
};
},
computed: {
...mapState(["films"]),
},
beforeCreate(){
this.$store.dispatch("fetchFilms")
this.currentFilm = this.$store.state.films[this.currentIndex]
},
};
</script>
警告：
[Vue warn]: Unhandled error during execution of render function
at <CardFilms>
at <Acceuil onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <CardFilms>
at <Acceuil onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>
错误：
Uncaught (in promise) TypeError: can't access property "title", _ctx.films[$data.currentIndex] is undefined
这真的是一个 Vue 内部错误吗？一些机构有解决方案？ VueJS 3 | Vuex 4