Vue3 (사이트 제작 4 - MovieList - vueX)

VueX를 이용한 형제컴포넌트 Store 이용

부모 및 자식 관계에서는 Props를 이용한 데이터 전달이 가능하지만 형제요소끼리는 데이터 전달하기가 매우 어렵다.

그러기 위해선 VueX라는 중앙집중형데이터방식을 사용해야하는데 일단 movielist와 MovieItem 뷰 파일을 제작 후 사용해보자

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>

VueX 설치

npm i vuex@next

설치 후, store라는 폴더를 만들어서 안에 index.js를 제작한다. 미리 movie.js 와 about.js를 제작하자.

index.js

import { createStore } from 'vuex'
import movie from './movie'
import about from '.about'

export default createStore ({
  modules: {
    movie,
    about
  }
})

movie.js

실제로 상태관리를 하기위해 만든 스크립트이다.
이해할려니 상당히 어렵다... 시간이 많이 필요해보인다.

export default {
  // module!
  namespaced: true,
  // data!
  state: () =>{
    return {
      movies: []
    }
  },
  // computed!
  getters: {
    movieIds(state) {
      return state.movies.map(m => m.imdbID)
    }
  },
  // methods!
  // 변이 이것을 통해 수정이 가능하다
  mutations: {
    resetMovies(state) {
      state.movies = []
    }
  },
  // 비동기
  actions: {
    searchMovies() {
      
    }
  }
}

내일도 열심히 공부하자!!