Vuex

Vuex 란?

무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 라이브러리입니다.

Flux 란?

Vuex 는 Flux 패턴을 기반으로 만들어졌다고 함.

• MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴
• Action -> Dispatcher -> Model -> View (단방향 데이터 흐름을 가지고 있음.)
• MVC 패턴의 문제점으로 데이트 흐름이 여러 방향으로 기능 추가 및 변경시 앱이 복잡해지면서 생기는 업데이트를 예측할 수 없음.

Vuex 를 사용하는 이유

• 컴포넌트 갯수가 많아질수록, 컴포넌트 간의 파라미터를 통한 데이터 전달이 어렵다.
• MVC 패턴에서 발생하는 구조적 오류 해결 (vuex 도 단방향)
• 여러 개의 컴포넌트에서 같은 데이터를 통한 업데이트시 동기화 문제 (mutation, actions)

Vue 컨셉 및 구조

• State: 컴포넌트 간의 공유하는 데이터 data
• View: 데이터를 표시하는 화면 template
• Action: 사용자의 입력에 따라 데이터를 변경하는 methods
• 구조: 컴포넌트 -> 비동기 로직(Actions) -> 동기 로직(Mutations) -> 상태(State)

1. state: Vuex 의 변수 (this.$store.state.변수명)
2. mutations 는 Vuex 의 state 를 변경할 수 있는 메서드 (this.$store.commit(함수명, 인자)), 함수명 (state, 인자) 로 받아 사용할 수 있음. state 를 조작할 수도 있음.
3. actions 는 비동기 동작을 가진 mutations
4. getters 는 공통으로 관리할 로직을 관리할 수 있는 방법
5. modultes 는 위의 store 동작을 모듈로 분리하여 사용할 수 있는 방법