Vue中获取数据后如何将JSON数据带出作用域？

你当前的问题是没把处理好的电影数据存入响应式变量，也没把变量暴露给模板和子组件，按下面步骤修改就能解决：

1. 把数据存入响应式变量movies #

你已经定义了movies = ref([])，但setMovies里只是解构属性没存数据。修改setMovies函数，把处理后的数据赋值给movies.value：

function setMovies(movieData) {
  // 可选：处理电影数据，比如拼接完整海报地址
  const processedMovies = movieData.map(movie => {
    const { title, poster_path, vote_average, overview } = movie;
    return {
      title,
      posterUrl: `https://image.tmdb.org/t/p/w500${poster_path}`,
      vote_average,
      overview
    };
  });
  movies.value = processedMovies;
}

如果不需要额外处理，也可以直接在请求回调里赋值：

onMounted(() => {
  fetch(api_url.value)
    .then(res => res.json())
    .then(data => {
      movies.value = data.results;
    });
});

2. 暴露movies给模板和子组件 #

在setup的返回对象里加上movies，这样模板和子组件才能访问到：

return { searchOn, movies, handleSearch };

3. 给子组件传递movies数据 #

修改模板里的MovieList组件，把movies作为props传进去：

<div v-else>
  <MovieList :movies="movies" />
</div>

然后在MovieList.vue里定义接收这个props：

// MovieList.vue
export default {
  props: {
    movies: {
      type: Array,
      required: true
    }
  }
}

4. 补全handleSearch函数 #

你模板里用了这个函数但没实现，基础版本可以这么写（记得给input加v-model绑定搜索关键词）：

const searchQuery = ref(''); // 新增搜索关键词响应式变量

const handleSearch = () => {
  searchOn.value = true;
  // 这里可以添加搜索API请求逻辑，比如：
  // const searchUrl = `https://api.themoviedb.org/3/search/movie?api_key=你的密钥&query=${searchQuery.value}`;
  // fetch(searchUrl)
  //   .then(res => res.json())
  //   .then(data => {
  //     // 把搜索结果存入movies或者单独的searchMovies变量
  //   });
};

同时给input加v-model：

<input type="text" v-model="searchQuery" placeholder="Search here..." />

修改后的完整父组件代码 #

<template>
  <h1>MovieDesk</h1>
  <div class="hero">
    <!-- Search  -->
    <div class="search">
      <form @submit.prevent="handleSearch">
        <input type="text" v-model="searchQuery" placeholder="Search here..." />
        <button @click="handleSearch">Search</button>
      </form>
    </div>
  </div>

  <!-- Movies -->
  <div v-if="searchOn">
    <SearchedMovies :movies="movies" /> <!-- 同样给搜索结果组件传数据 -->
  </div>
  <div v-else>
    <MovieList :movies="movies" />
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import MovieList from "../components/MovieList.vue";
import SearchedMovies from "../components/SearchedMovies.vue";
import { onMounted } from "@vue/runtime-core";

export default {
  components: { MovieList, SearchedMovies },

  setup() {
    const searchOn = ref(false);
    const searchQuery = ref('');
    const api_url = ref(
      "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=你的密钥&page=1"
    );
    const movies = ref([])

    onMounted(() => {
      fetch(api_url.value)
        .then((res) => res.json())
        .then((data) => {
          setMovies(data.results);
        });
    });

    function setMovies(movieData) {
      const processedMovies = movieData.map(movie => {
        const { title, poster_path, vote_average, overview } = movie;
        return {
          title,
          posterUrl: `https://image.tmdb.org/t/p/w500${poster_path}`,
          vote_average,
          overview
        };
      });
      movies.value = processedMovies;
    }

    const handleSearch = () => {
      searchOn.value = true;
      // 这里补充搜索逻辑
    };

    return { searchOn, searchQuery, movies, handleSearch };
  },
};
</script>

内容的提问来源于stack exchange，提问作者IndabCoding