9. Vuex에 대해서

Springboot와 Vue 로그인 기능 구현하기

---

springboot에서 배운 JWT로그인 방식을 Vue에서도 사용하고싶다. 우선 Vue에서 할 일은

 

1.  로그인 페이지 에서 /authenticate 시 token과 사용자의 정보를 저장하고 
2.  이후 api를 요청할때 token을 담아 보내 인증된 사용자라고 증명하는 것

위의 토큰과 사용자의 정보를 저장하기 위해 상태관리 라이브러리인 Vuex를 사용했다.

 

 

 

 

 

 

Vuex란?

---

• Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리
• 무수히 많은 컴포넌트의 데이터를 관리하기 위한 라이브러리
• 애플리케이션의 모든 컴포넌트들에 대한 중앙 집중식 저장소의 역할 및 관리를 담당
• 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우 사용하기 적합하다

 

npm으로 Vuex 설치

npm install vuex --save

 

 

 

 

Vuex의 구조 (속성)

---

Mutations Action State Getters

아래 블로그를 참고하여 공부하자

Vuex란? 개념과 예제

 

 

 

Mutations

• mutations도 getters와 동일하게 state의 값을 변환 시킬 때 사용한다.
• mutations는 동기적 로직을 정의한다는 특징을 가지고 있다.
• mutations와 getters의 차이점
  1. mutations는 전달인자를 받을 수 있다.
  2. getters는 computed에 등록 했지만 mutations는 methods에 등록한다.

 

 

Action

• mutations는 동기적 변이를 다룬다고 하였다.
  actions는 그와 반대로, 비동기적 변이를 다루는 속성이다.

 

 동기적(Synchronous)
 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다린 후 다음 작업을 수행하는 방식

 

 비동기적(Asynchronous)
 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다리지 않고 다른 작업을 하고 있다가, 요청했던 작업이 종료되면   그에 대한 추가 작업을 수행하는 방식

 

 

 

State

• State는 상태의 집합
• Vuex 는 단일 상태 트리(single state tree) 를 사용하기 때문에 이 집합 내에서 현재 상태를 쉽게 찾을 수 있다

  단일 상태 트리(single state tree)

• 단일 상태 트리란, 쉽게 말해서 하나의 어플리케이션은 하나의 store만 가진다는 것을 의미한다.

 

 

Getters

• vue의 computed와 동일속성인데 다만 store에 있는 것
• 여러 컴포넌트에서 동일한 computed가 사용될 경우 Getters에 정의 후 사용