Recently, I've been diving into Vuex and its actions for fetching data. While everything seems to be working smoothly - accessing the films object, selecting films from it - I encounter an error when trying to access specific data within a film.
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 is a service for fetching data using Axios. For simplicity, I'll skip that part as it functions correctly.
Component:
<template>
<section>
{{ films[currentIndex] }} //No errors here
{{ films[currentIndex] }} //No errors but warnings in console
{{ currentFilm }} //This gives an error
</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>
Warnings:
[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 could be a Vue internals bug. Consider reporting it.
Error:
Uncaught (in promise) TypeError: can't access property "title", _ctx.films[$data.currentIndex] is undefined
Is this really a Vue internals issue? Any solutions? VueJS 3 | Vuex 4