[TIL] 20211101 vue persistedstate/ lodash debounce 등

▶ 로그인 시 헤더에서 버튼이 바로 변경되게 하는 법

vuex를 쓰면 새로 고침하면 날라가고, 로컬 스토리지를 쓰면 바로 반영이 안된다.

해결 -> vue persistedstate 라이브러리 사용

import Vuex, { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';
import { Movies, SavedMovie } from '@/type';
// import { Movie } from "./modules/Movie.js";

export default createStore({
  state: {
  ...
  },
  mutations: {
   ...
    

  },
  actions: {
    ...
  },
  plugins: [createPersistedState()],

});

이렇게 플러그인만 넣어주고 vuex랑 똑같이 사용하면 된다.

그러면 저절로 라이브러리에 여기 있는 state들이 저장된다.

 

 

 

▶ 화면에서 이 장르 필터들을 색깔을 지정해주고 싶었다. 

이것을 db에 저장을 할까 생각했었는데 스타일적인 부분은 프론트에서 처리하는 게 좋다고 해서

컬러 세트 배열을 만들어서 컴포넌트한테 뿌려주었다. 

 

 

 

▶  검색 debounce

// search movie
    const searchMovie = async () => {
      const fetchData = await searchMovieAPI(searchKeyword.value);
      if (fetchData) store.dispatch("getSearchMovies", fetchData);
    };

    const search = _.debounce(() => {
      searchMovie();
    }, 200);

    watch(searchKeyword, () => {
      search();
    });

검색하는 기능을 구현중

searchKeyword를 watch하고 바뀔때마다 search 함수가 실행되고 200ms지연 시켜서 searchMovie를 실행시켜 

db에서 찾은 영화를 보여주도록 만들었다. 

 

 

 

▶ vscode에서 저장시에 자꾸 저절로 줄바꿈이 되는 문제

command + , 를 누르고 formatonsave를 치고 체크 해제 해주면 됨

https://myhappyman.tistory.com/182

VS Code - 저장 시 자동 줄 정렬 끄기

 

 

▶ 자동완성 기능 구현 레퍼런스

https://codepen.io/moonspam/pen/WNNJRbd

Vue.js Example - Autocomplete