В VUEX показывается данные,но javaScript выдает undefined

Рейтинг: 0Ответов: 1Опубликовано: 28.07.2023

Я использую VUEX. VUEX показывает данные,но JavaScript выдает ошибку

<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>`

JavaScript пишет //TypeError: this.ONE_FILM.actors is undefined

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;
        },
    }
}

Помогите ,пожалуйста:(

javascript vue.js vuex
Источник: Stack Overflow на русском

Ответы

▲ 0

Нельзя получить доступ к свойствам ONE_FILM до того, как он был загружен из API.

Когда компонент создается, ONE_FILM изначально равен null или пустому объекту. Поэтому обращение к ONE_FILM.actors вызывает ошибку.

Могу ошибаться, но мысли есть такие:

1)Добавляем проверку, что ONE_FILM загружен:

computed: {
  allActors() {
    if (!this.ONE_FILM) return []; 
    return this.ONE_FILM.actors.split(",");
  }
}

2)Используем свойство loaded в сторе, чтобы отслеживать статус загрузки:

state: {
  oneFilm: {},
  loaded: false
}

getters: {
  ONE_FILM(state) {
    return state.oneFilm;
  },
  
  isLoaded(state) {
    return state.loaded;
  }
}

// в компоненте
computed: {
  allActors() {
    if (!this.isLoaded) return [];
    // ...
  } 
}

3)Ждём загрузку в запросе:

async created() {
  await this.$store.dispatch('getFilm');
  // теперь можно обращаться к ONE_FILM
}

Главное - не обращаться к данным, пока они точно не загружены.