Question

我正在用Vue和Vuex创建movie-app，它将在Home组件中显示所有电影，并在Details（子）组件中单击单个电影。我在“主页”组件中获得了所有电影，但是在“详细信息”组件中无法显示单个电影。

我已在子组件中启用了道具，但在将电影ID传递到从吸气剂（在“详细信息”组件中）导入的方法时遇到了问题，该方法应从电影列表中过滤选定的电影。

主页组件

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

我尝试用{{id}}替换{{movie.title}}，然后单击“家庭”组件中列出的电影，然后得到显示的电影ID。我还尝试将影片ID硬编码为参数：返回this。$ store.getters.singleMovie（299536），我成功显示标题，但在控制台中出现错误“ TypeError：无法读取未定义的属性'title'”。显然，传递传递的电影ID会出错。

Answer 1

不会在每个vue生命周期中加载您计算的属性影片。因此，第一次获得movie时，它就是undefined，而你的胡子{{ movie.title }}实际上是类似{{ 'undefined'.title }}的东西，这会导致错误。

要解决此问题，您可以在v-if="movie"中添加一个template有条件，也可以在计算的属性影片中返回默认值。这样，例如：return state.movies.find(item => item.id === movieId) || {};

将数据从Vuex获取器传递到子组件的问题

1 个答案: