[Vue.js][State Management] 11. Local Storage, pinia-plugin-persistedstate

▶ Local Storage

브라우저 내에 key-value 쌍을 저장하는 웹 스토리지 객체

특징) 페이지를 새로 고침하고, 브라우저를 다시 실행해도 데이터가 유지됨 쿠키와 다르게 네트워크 요청 시 서버로 전송되지 않음 여러 탭이나 창 간에 데이터를 공유할 수 있음

사용 목적) 웹 어플에서 사용자 설정, 상태 정보, 캐시 데이터 등을  클라이언트 측에서 보관하여  웹사이트의 성능을 향상시키고 사용자 경험을 개선하기 위함

 

▶pinia-plugin-persistedstate

Pinia의 플러그인(plugin) 중 하나 웹 어플리케이션의 상태(state)를 브라우저의 local storage나 session storage에  영구적으로 저장하고 복원하는 기능을 제공 * 참고 https://prazdevs.github.io/pinia-plugin-persistedstate/

 

▶pinia-plugin-persistedstate 설정 

	설치 및 등록
	defineStore()의  3번째 인자로 관련 객체 추가
	적용 결과  개발자도구 -> Application  -> Local Storage 브라우저의 Local Storage에 저장되는 todos state 확인

 

▶ 참고 

Q. 이제 모든 데이터를 store에서 관리해야 할까? Pinia를 사용한다고 해서  모든 데이터를 state에 넣어야 하는 것은 아니다 pass props, emit event 를 함께 사용하여  어플을 구성해야 함 상황에 따라 적절하게 사용하는 것이 필요하다

Q. Pinia, 언제 사용해야 할까? Pinia는 공유된 상태를 관리하는 데 유용하지만, 구조적인 개념에 대한 이해와 시작하는 비용이 크다 어플이 단순하다면 Pinia가 없는 것이 더 효율적인 수 있다 그러나, 중대형 규모의 SPA를 구축하는 경우 Pinia는 자연스럽게 선택할 수 있는 단계가 오게 된다 => 결과적으로 적절한 상황에서 활용 했을 때 Pinia 효용을 극대화할 수 있다.