Vuex

- Vuex

 상태(state)를 관리하는 라이브러리
 Vue.js 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할

 

- 상태(state)

어떤 객체가 가진 데이터(data)

Vue.js에서는 컴포넌트(객체)의 data가 상태
지역적으로는 props와 emit으로 컴포넌트 내 데이터 전달
전역적으로는 vuex 스토어에 저장하던지 브라우저의 쿠키 또는 로컬 스토리지에 저장하여 데이터 공유

- Vuex로 상태 관리를 해야하는 이유

 Vue.js에서 부모는 props를 통해 자식에게 데이터를 전달하고, 자식은 events(emit)를 통해 부모에게 전달
props는 아래로, events 위로 전달

 

 규모가 크고 복잡한 앱일수록
1. props, emit 이 거쳐야 할 컴포넌트가 많아짐
2. Event Bus를 쓰면 컴포넌트 간 데이터 흐름을 파악하기 어려움
 이러한 문제점을 해결하기 위해 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리
 규모가 작은 프로젝트에서는 필요 없을 수 있음

- Vuex 특징

1. Single Source of Truth: 하나의 어플리케이션은 하나의 store만 가짐

 하나의 객체가 어플리케이션 전체 state를 포함하고 이 객체가 하나의 원본 소스임
2. state is Reactive: 상태가 변경되면 이 상태를 공유하는 다른 곳에서도 상태가 업데이트됨

- 주의 사항

 페이지 새로고침 시 store에 데이터가 사라짐(쿠키 or 스토리지나 다른 라이브러리로 처리 가능)

 백엔드쪽에서 세션 or 클라이언트에서 토큰화된 형태를 보관하는 방식으로 해결가능

 공통적으로 사용하는 상태가 아닌 경우는 메모리를 낭비할 수 있음

- vuex구조

- state: Vue의 data와 같음

 원본 소스 역할

 View와 직접적으로 연결되어있는 Model

 state는 mutation을 통해서만 변경이 가능(mutation으로 state를 변경시키면 반응적으로 View가 업데이트 됨)

- mutation: state를 변경하는 유일한 방법

 일반적으로 commit을 통해서만 호출할 수 있음

 첫 번째 인자는 state, 두 번째 인자는 payload

 주로 API를 통해 전달받은 데이터를 mutation에서 가공하여 state를 설정하는데 사용됨

- action: 비동기 작업 가능, 그 외엔 mutation과 비슷

 action에서도 mutation을 통해 state를 변경 가능

 주로 axios를 통한 api 호출과 그 결과에 대해 return하거나 mutation으로 commit하는 용도로 사용

- getters: Vue의 compute와 같음(계산된 속성)

 state에 대해 연산을 하고 그 결과를 view에 바인딩 할 수 있음

 state의 벼경 여부에 따라 다시 계산하고 view를 업데이트

- modules: 모듈별(기능 or 페이지)로 store를 분리하고 관리 가능

 

 

- Vue 3에서 사용

<template>에서 사용: $store.state.상태이름 으로 접근
<script>에서 사용: store.commit('mutation이름', 데이터) 로 호출

 

 

- 공부하게 된 계기

 갤러리 웹 프로젝트를 만들면서 로그인 기능을 구현하던 중 로그인 상태를 임시로 확인하기 위해 vuex를 공부

 account라는 id값을 가지는 state를 만들고 setAccount라는 mutation으로 로그인 되어있으면 state를 1로, 로그인이 되어있지 않으면 state를 0으로 설정하여 로그인 여부를 확인하였음

 이 로그인 여부에 따라 Vue3의 v-if로 로그인 한 회원과 로그인 하지 않은 비회원의 화면이 다르게 출력되게 구현

 

 하지만 vuex로 로그인 상태 확인 기능을 구현하면 새로고침 시 로그인 정보가 모두 날아가므로 추후에 JWT 토큰을 발급받아 로그인 상태를 확인하도록 추가 구현했음

 

 

 

 

 

 

 

참고:

https://velog.io/@yjyoo/vue.js-Vuex-%EC%A0%95%EB%A6%AC

[vue.js] Vuex 정리