I'm utilizing Vuex to retrieve data from a URL and I need to use this data in computed properties in Vue.js. What could be causing the issue?
<script>
import {mapGetters, mapActions} from "vuex";
computed: {
...mapGetters(["ONE_FILM"]),
allActors() {
return this.ONE_FILM.actors.split(",")
},
allVoiceActors() {
return this.ONE_FILM.rolesDuplicated.split(",")
},
}
</script>
View image description here
//TypeError: this.ONE_FILM.actors is undefined
This is how my Vuex code is structured:
export default {
state: {
oneFilm: {
actors:[],
rolesDuplicated:[],
relatedFilms:[],
facts:[],
reviews:[]
}
},
actions: {
async getFilm({commit}, id) {
const data = await fetch(URL);
const dataResponse = await data.json();
const film = dataResponse.data[id]
commit("setOneFilmData", film)
},
},
mutations: {
setOneFilmData(state, film) {
state.oneFilm = film
},
},
getters: {
ONE_FILM(state) {
return state.oneFilm;
},
}
}