Vue 프로젝트 Vuex(Store) 개요

 

Vue 프로젝트 Vuex(Store) 개요

 

1. /src/components/MovieList.vue, /src/components/MovieItem.vue 생성

<!-- 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'
export default {
  components: {
    MovieItem
  },
  data() {
    return {
      movies: []
    }
  }
}
</script>

 

<!-- MovieItem.vue -->

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

 

2. /src/routes/Home.vue 에 MovieList.vue 연결

<template>
  ... 생략
  <MovieList />
</template>

<script>
... 생략
import MovieList from '~/components/MovieList'

export default {
  components: {
    ... 생략
    MovieList
  }
}
</script>

 

---

 

Vuex(Store) - 중앙 집중식 상태 관리 라이브러리

 

각 컴포넌트가 데이터를 중앙 집중 저장소에서 공유하여 컴포넌트의 단계가 많아지더라도 쉽고 효율적으로 데이터를 활용

 

Search.vue 라는 컴포넌트를 확인하면 apply() 메소드를 통해서 영화 정보를 요청해서 가지고 오면 res 라는 변수에 담는다 (Search.vue 컴포넌트 내부에서 데이터를 받아놓은 상태)

 

해당 데이터를 MovieList.vue 라는 컴포넌트에 데이터를 전달해야한다

 

관계가 형제 컴포넌트 관계이므로 일반적으로는 데이터 통신이 불가능하다

- 부모/자식 관계라면 Props 를 이용해서 데이터 통신

- 상/하위 관계라면 Provide/Inject 를 이용해서 데이터 통신

 

이러한 문제를 해결하기 위해서 Vuex 라이브러리 를 사용한다