[영화 검색 사이트] VUEX(STORE)

VUEX

상태관리패턴 라이브러리

https://v3.vuex.vuejs.org/kr/

Vuex가 무엇인가요? | Vuex

 

vuex 설치

npm i vuex@next

 

vuex 기본 구조

// movie.js
export default {
  // module!
  namespaced: true,
  // data!
  state: () => ({

  }),
  // computed!
  getters: {},
  // methods!
  // 변이
  mutations: {
  
  },
  // 비동기
  actions: {

  }
}

 

MovieList.vue

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

<script>
import MovieItem from './MovieItem.vue';

  export default {
    components: {
      MovieItem
    },
    computed: {
      movies() {
        return this.$store.state.movie.movies
      }
    }
  }
</script>

 

lodash

uniqBy

중복제거함수

      commit('updateState', {
        movies: _uniqBy(Search, 'imdbID')
      })