• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

(Vuex 적용 - 인증 1) 강의에서 8분 18초 부분 질문 있습니다.

21.07.23 21:42 작성 조회수 231

0

강의에서 

"뷰 어플리케이션이 구동되었을 때 브라우저 저장소를 확인한다. localstorage에 token이 있는지 없는지 체크한다."

const store = new Vuex.Store({ ... });

const { token } = localStorage;
store.commit("LOGIN", token);

export default store;

Vuex라는 것은 별도의 저장소이고 이 저장소를 컴포넌트 레벨에서 필요한 상태나 로직들을 불러와서 처리하는 것으로 알고 있는데,

위와 같이 localStorage에서 토큰을 가져와 LOGIN mutations에 전달하는 로직을 왜 Vuex의 store 부분에 선언한 이유가 무엇인가요?

답변 1

답변을 작성해보세요.

2

"로컬 저장소에 있는 데이터를 왜 스토어에 넣느냐?" 

제가 질문을 제대로 이해한 것일까요? 

로컬스토리지와 vuex 스토어의 큰 차이는 데이터 영속성입니다. 로컬 스토리지는 화면을 여러 번 갱신해도 데이터가 브라우져에 남아 있습니다. 반면 스토어는 메모리에 저장되기 때문에 화면을 갱신하면 데이터가 사라지는 점이 다릅니다.

화면이 갱신되더라도 인증을 유지하기 위해 영속성 있는 로컬 스토리지에 담아 두었어요. 그리고 이걸 어플리케이션에서 사용하기 위해 스토어로 가져온 것입니다.