▶ 로그인 시 헤더에서 버튼이 바로 변경되게 하는 법
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
▶ 자동완성 기능 구현 레퍼런스
https://codepen.io/moonspam/pen/WNNJRbd
728x90
'TIL' 카테고리의 다른 글
[TIL] 20211103 dotenv/ git flow feature branch (0) | 2021.11.09 |
---|---|
[TIL] 20211102 vue 한글 바인딩/ computed/ watch / 이미지 에러 핸들링 (0) | 2021.11.02 |
[TIL] 20211030 typescript + vue 타입 정의 (0) | 2021.11.01 |
[항해 99 2기 후기] 항해99 를 하면 진짜 99일만에 개발자가 될까? (43) | 2021.11.01 |
[TIL] 20211028 이벤트 버블링/ pagination/ axios / vuex store (0) | 2021.10.31 |