Проблема с передачей данных из геттеров Vuex в дочерний компонент - PullRequest
Новая
       14

Проблема с передачей данных из геттеров Vuex в дочерний компонент

1 голос
/ 30 апреля 2019

Я создаю приложение-фильм с Vue и Vuex, которое будет отображать все фильмы в компоненте «Домой» и по щелчку на отдельном фильме в компоненте «Детали» (дочерний).Я получаю все фильмы в компоненте Home, но не могу отобразить один фильм в компоненте Details.

Я включил реквизиты в дочернем компоненте, но у меня проблема с передачей идентификатора фильма методу, импортированному из метода получения (в компоненте Details), которыйдолжен отфильтровать выбранный фильм из списка фильмов.

Домашний компонент 

<template>
  <div class="home">
     <router-view />
          <h1>Home component:</h1>
            <div v-for="movie in movies"
              :key="movie.id">
              <div>
                <router-link :to="'/movie/' + movie.id">{{ movie.title }}</router-link>
              </div>
            </div>
  </div><!--home-->
</template>

<script>
import axios from 'axios'
import { mapGetters, mapActions } from 'vuex'

export default {
  name: "home",
  methods: {
        ...mapActions(['fetchMovies']),
    },
    computed: {
        ...mapGetters(['movies'])
    },
    created() {
        this.fetchMovies()
    }
};
</script>

Подробный компонент 

<template>
    <div>
        <h1>Movie details - child component</h1>
        <h2>Title: {{ movie.title }}</h2>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
    export default {
        props: ['id'],
        computed: {
            movie() {
                return this.$store.getters.singleMovie(this.id)
            }
        }
    }
</script>

Магазин Vuex 

const state = {
  movies: []
};
const getters = {
  movies: state => state.movies,
  singleMovie: state => movieId => {
    return state.movies.find(item => item.id === movieId);
  }
};
const actions = {
  async fetchMovies({ commit }) {
    const response = await axios.get(
      movie_url + "movie/popular" + "?api_key=" + api_key
    );
    commit("setMovies", response.data.results);
  }
};
const mutations = {
  setMovies: (state, items) => (state.movies = items)
};
export default {
  state,
  getters,
  actions,
  mutations
};

Я попытался заменить {{movie.title}}с {{id}}, а затем я получаю отображаемый идентификатор фильма, когда нажимаю на перечисленные фильмы в компоненте «Домой».Я также попытался жестко закодировать идентификатор фильма в качестве параметра: вернуть this. $ Store.getters.singleMovie (299536), и я успешно отображаю заголовок, но в консоли я получаю сообщение об ошибке «Ошибка типа: Невозможно прочитать свойство« заголовок »из неопределенного».Очевидно, что я делаю ошибку с передачей идентификатора доставленного фильма.

1 Ответ

0 голосов
/ 30 апреля 2019

Ваш фильм с вычисленными свойствами не загружается в каждый жизненный цикл VUE.Итак, в первый раз, когда вы получаете movie, это undefined, а ваши усы {{ movie.title }} на самом деле что-то вроде {{ 'undefined'.title }}, что вызывает ошибку.

Чтобы решить ее, вы можете добавитьv-if="movie" условное в template или возврат значения по умолчанию в вычисляемом свойстве фильма.Вот так, например: return state.movies.find(item => item.id === movieId) || {};

...