[Vue3] Vuex - 이론편

Vuex

• 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
• React의 Flux 패턴에서 기인함
• Vue.js 중고급 개발자로 성장하기 위한 필수 관문

Vuex가 필요한 이유

• 복잡한 애플리케이션에서 컴포넌트의 개수가 많이지면 컴포넌트 간에 데이터 전달이 어려워진다.

Vuex로 해결할 수 있는 문제

1. MVC 패턴에서 발생하는 구조적 오류
2. 컴포넌트 간 데이터 전달 명시
3. 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제

Vuex 컨셉

• State : 컴포넌트 간에 공유하는 데이터 data()
• View : 데이터를 표시하는 화면 template
• Action : 사용자의 입력에 따라 데이터를 변경하는 methods

Vuex 구조

컴포넌트 → 비동기 로직 → 동기 로직 → 상태