Vuex Store란?

Vuex란?

Vuex는 Vue.js 애플리케이션에서 상태(state) 관리를 위한 라이브러리입니다. Vue 애플리케이션에서 중앙 집중식 상태 관리를 제공하여 컴포넌트 간 데이터 공유와 상태 관리를 효율적으로 처리할 수 있습니다. Vuex는 단방향 데이터 흐름(one-way data flow)을 따르며, 애플리케이션의 상태를 예측 가능하게 관리할 수 있도록 설계되었습니다.

---

Vuex의 주요 기능

1. 중앙 집중식 상태 관리 (Centralized State Management)
   • Vuex는 애플리케이션의 상태를 중앙에서 관리합니다. 상태는 모든 컴포넌트에서 접근 가능하며, 상태 변경은 통합된 방식으로 처리됩니다.
2. Vue의 반응성 활용 (Reactivity)
   • Vuex의 상태는 Vue의 반응성 시스템을 기반으로 하므로 상태가 변경되면 자동으로 UI가 업데이트됩니다.
3. 엄격한 상태 변경 방식 (Mutation)
   • Vuex에서는 상태를 직접 변경할 수 없으며, 반드시 Mutation을 통해 상태를 변경해야 합니다. 이를 통해 상태 변경의 추적이 용이합니다.
4. 비동기 작업 지원 (Actions)
   • 비동기 로직(예: API 호출)은 Vuex의 Actions에서 처리한 후 Mutation을 통해 상태를 업데이트합니다.
5. 모듈화 지원 (Modules)
   • 대규모 애플리케이션에서는 Vuex 상태를 모듈로 나눠 관리할 수 있습니다.

---

Vuex의 구성 요소

1. State: 중앙에서 관리되는 상태 데이터.
2. Mutations: 상태를 변경하는 동기 메서드.
3. Actions: 비동기 작업을 처리하는 메서드.
4. Getters: 상태 데이터를 가공하여 반환하는 계산 속성.
5. Modules: 상태 관리의 모듈화.

---

Session과 Vuex의 차이점

특징VuexSession

저장 위치	클라이언트 메모리 (브라우저 내 자바스크립트 메모리).	서버 또는 클라이언트 (예: 브라우저 쿠키, 로컬 스토리지, 세션 스토리지).
데이터 유지 기간	페이지를 새로고침하면 데이터가 사라짐 (default).	세션은 서버에서 관리되며, 클라이언트는 세션 ID를 쿠키로 유지. 브라우저 세션 스토리지에 저장된 경우 브라우저 종료 시 데이터 삭제.
사용 목적	컴포넌트 간 상태 공유 및 중앙 집중식 관리.	사용자 인증 및 세션 상태 유지(예: 로그인 상태 유지).
반응성	상태가 변경되면 자동으로 UI 업데이트.	반응성 없음. 데이터를 가져오거나 설정할 때 직접 UI를 업데이트해야 함.
영속성	상태는 기본적으로 메모리에만 저장. 지속적인 저장을 위해 Vuex-PersistedState 같은 플러그인이 필요.	서버 기반 세션은 서버에 저장되고, 클라이언트 기반 세션은 스토리지(쿠키, 로컬 스토리지 등)에 저장되어 새로고침 후에도 유지.
사용 사례	컴포넌트 상태 관리, Vue 애플리케이션의 중앙 상태 관리.	인증 세션, 사용자 설정 저장, 간단한 데이터 영속화.

---

Vuex와 Session 사용 예시

• Vuex 사용 예시
  • 장바구니 기능: 장바구니 데이터를 Vuex 상태로 관리하여 컴포넌트 간 공유.
  • UI 상태 관리: 다크 모드, 토글 상태 등 클라이언트에서 즉시 업데이트가 필요한 데이터 관리.
• Session 사용 예시
  • 로그인 인증: 사용자 세션 정보를 서버에 저장하고, 세션 ID를 클라이언트 쿠키에 저장.
  • 장시간 유지 데이터: 브라우저를 닫아도 유지되어야 하는 사용자 설정(로컬 스토리지와 함께 사용 가능).

---

결론

• Vuex는 Vue 애플리케이션 내에서 상태를 효율적으로 관리하기 위해 사용되며, 주로 컴포넌트 간의 데이터 공유와 상태 관리에 적합합니다.
• Session은 사용자 인증 및 데이터의 영속성을 위해 사용되며, 브라우저를 닫거나 새로고침 이후에도 데이터를 유지하고 싶을 때 사용합니다.
• 애플리케이션의 요구사항에 따라 두 기술을 혼합하여 사용할 수 있습니다.

 

Vuex로 사용자 정보 저장하기

아래는 Vuex를 사용하여 사용자 정보를 임시적으로 저장하는 예제입니다.

1. Vuex Store 설정

 

---

2. 사용자 정보 저장 및 사용

사용자 정보 저장

로그인 API 호출 후 사용자 정보를 Vuex에 저장합니다.

사용자 정보 사용

다른 컴포넌트에서 사용자 정보를 가져와 사용할 수 있습니다.

로그아웃 처리

사용자 정보를 초기화합니다.

 

 

SNS Ouath2 소셜로그인을 진행하여 각 세션로그인에서 가져온 ID 값을 Vuex에 저장을 해두자. 

 

저장되어있는 mapState정보를 다시 꺼내어서 각 페이지 마다 정보를 조회할 수 있다.