Vue 프로젝트 단일 영화 상세 정보 가져오기

 

예제

 

여기서부터는 단일 영화 상세 정보 페이지를 구현할 예정

 

Vue 프로젝트 단일 영화 상세 정보 가져오기

 

1. /src/store/movie.js 수정

- searchMovieWithId() 추가

- _fetchMovie() URL 수정

... 생략
  state: () => ({
    ...
    theMovie: {}
  }),
...

  actions: {
    async searchMovies({ state, commit }, payload) {
      ...
    },
    async searchMovieWithId(context, payload) {
      if (state.loading) return

      commit('updateState', {
        theMovie: {},
        loading: true
      })

      try {
        const res = await _fetchMovie(payload)
        commit('updateState', {
          theMovie: res.data
        })
      } catch (error) {
        commit('updateState', {
          theMovie: {}
        })
      } finally {
        commit('updateState', {
          loading: false
        })
      }
    }
... 생략

function _fetchMovie(payload) {
  ...
  const url = id 
    ? `https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&i=${id}` 
    : `https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${title}&type=${type}&y=${year}&page=${page}`
    
...

 

2. /src/routes/Movie.vue 수정

- created() 추가

...

<script>
export default {
  created() {
    console.log(this.$route)
    this.$store.dispatch('movie/searchMovieWithId', {
      // movie/tt123456
      id: this.$route.params.id
    })
  }
}
</script>

 

3. /src/routes/index.js 수정

... 
export default createRouter({
  ...
  routes: [
    ...
    {
      path: '/movie/:id',
      component: Movie
    }
...

 

4. /src/components/Header.vue 수정

...

data() {
    return {
      navigations: [
        ...
        {
          name: 'Movie',
          href: '/movie/tt4520988'
        },
...