[Vue.js][Ch4][영화검색 사이트] 영화 목록에서 ID 중복 제거

Lodash

• 구글에 lodash 검색 > https://lodash.com/ 이동 > Documentation 참고
• https://searchkim.tistory.com/153 참고

Lodash 패키지 설치

npm i lodash

.uniqBy(Array, Text)

Text를 기준으로 배열의 중복 제거 -> 데이터를 고유화시켜줌

검색된 영화 목록에 중복된 데이터가 존재한다.

• lodash 패키지의 uniqBy 기능을 이용해 중복 제거한다.

movie.js

최초 요청 데이터 갱신할 경우, 하단 코드로 수정

commit('updateState', {    // updateState 메소드가 실행될 때, 객체가 payload 인수로 전달된다.
    movies: _uniqBy(Search, 'imdbID'),    // imdbID 기준으로 movies 중복 제거
    message: 'Hello world!', 
    loading: true
});

추가 요청 데이터 갱신할 경우, 하단 코드로 수정

commit('updateState', {
    // ... : 전개 연산자
    movies: [
      ...state.movies, 
      ..._uniqBy(Search, 'imdbID')] // state.movies를 먼저 전개하고, Search 데이터를 전개
});

출력