Vvuex(store) 개요

• 부모와 자식간에 데이터 공유하는 방법: Props를 이용
• 상, 하위 요소간에 데이터를 공유하는 방법: Provide/Inject 이용(중간 요소가 있다면 건너띄고 전달할 수 있다.)
• 형제 컴포넌트 끼리 데이터를 공유하는 방법:  Vvuex라이브러리 이용(Store), Store라는 중간매개체를 이용하여 데이터 공유 가능

중앙집중식 상태관리 패턴 라이브러리라고 한다.

 

코드 수정(Home.vue)

<template>
  <Headline />
  <Search />
  <MovieList />
</template>

<script>
import Headline from '~/components/Headline.vue'
import Search from '~/components/Search.vue'
import MovieList from '~/components/MovieList.vue'

export default {
  components: {
    Headline,
    Search,
    MovieList
  }
}
</script>

 

MovieList.vue 생성

<template>
  <div class="container">
    <div class="inner">
      <MovieItem
        v-for="movie in movies"
        :key="movie.imdbID" />
    </div>
  </div>
</template>

<script>
import MovieItem from '~/components/MovieItem.vue'

export default {
  components: {
    MovieItem
  },
  data() {
    return {
      movies: []
    }
  }
}
</script>

MovieItem.vue 생성

<template>
  <div>
  </div>
</template>