LocalStorage
- 웹 브라우저에서 제공하는 key-value 형태의 데이터 저장소이다.
- 데이터를 저장하면 해당 웹 사이트를 나중에 다시 방문하더라도 이전에 저장한 데이터를 불러와 사용할 수 있다.
- 브라우저가 종료되거나 사용자가 데이터를 삭제하기 전까지 계속 보존된다.
- Vuex 실습
- index.js 작성
- App.vue 작성
plugins
- Vuex Store에 추가적인 기능을 제공하는 확장 기능이다.
- 일반적으로 state의 변화를 감지해, 어플리케이션의 성능을 최적화하는 목적을 가진다.
- Vue.js 애플리케이션의 Vuex Store의 인스턴스와 함께 사용되며, Store의 내부 상태를 조작하거나 Store의 액션을 모니터링하고 반응하는 데 사용된다.
- vuex-persistedstate
- Vuex store의 상태를 브라우저 local storage에 저장해 주는 plugin이다.
- 페이지를 새로 고침하거나 브라우저를 종료했다가 다시 열었을 때, 이전 상태를 유지할 수 있도록 해준다.
적용하기
- 터미널 설치 npm i vuex-persistedstate
- index.js 최상단에 import createPersistedState from 'vuex-persistedstate'
- Vuex.store에 plugins: [ createPersistedState ],
- 브라우저를 종료 후, 다시 서버를 열었을 때도 vuex의 상태가 유지됨을 확인
Vuex Binding Helper
- Vuex store의 state, mutations, actions 등을 간단하게 사용할 수 있도록 만들어진 헬퍼 함수이다.
- mapState, mapActions와 같은 형식으로 사용되며, import를 통해 받야 와야 한다.
mapState
- Vuex 스토어(store)에서 가져온 state 값을 컴포넌트의 computed 속성(computed property)으로 매핑(mapping)할 수 있도록 도와주는 함수이다.
- Vuex 스토어의 state 값을 컴포넌트의 computed 속성으로 가져오는 것을 간단하게 해주며, 컴포넌트에서 스토어의 값을 조작하지 않고 읽기만 하는 경우에 주로 사용된다.
코드 작성
- App.vue 작성
mapActions
- actions를 component에서 더 간단하게 사용할 수 있도록 도와준다.
- actions함수를 직접 호출하는 대신, 컴포넌트 메서드에서 액션을 호출 할 수 있다.
- component에서 this.$store.dispatch()를 호출하는 대신, 액션 메서드를 직접 호출하여 사용할 수 있다.
코드 작성
- App.vue 배열로
- App.vue 객체로
mapGetters
- mapState, mapActions와 동일한 방식으로 작성하고 작동한다.
modules
- Vuex store를 여러 파일로 나눠서 관리 할 수 있게 해주는 기능이다.
- Vuex store와 동일한 구성을 가진 별도의 객체를 정의하여 modules 옵션에 작성한 객체를 추가하여 사용한다.
코드 작성
- store폴더에 modules폴더 생성
- 별도의 js 파일에 객체 정의
- 정의한 js 파일의 객체를 App.vue에 import 및 store의 modules 옵션에 추가
- 이후는 지금까지 했던 방식그대로 사용
paths
- mapState나 mapGetters 등에서 state를 가져올 때 사용할 속성명들을 배열 형태로 지정하는 것이다.
- state 객체가 아주 크고 여러 곳에서 사용되는 경우 mapState나 mapGetters를 사용하여 state의 특정 속성들만 컴포넌트 내부에 바인딩할 수 있다.
- paths를 사용하면 바인딩할 state 속성들을 명시적으로 지정하여 코드 가독성을 높일 수 있다.
- 만약 persistedstate를 사용할 때 원하는 속성만 LocalStorage에 저장하고 싶다면?
다크모드가 보기 좋아요