[ 수정중 ]Vuex란?!

vuex란?

vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다.

애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다.

---

Vue의 구조?!

State :  컴포넌트 간에 공유하는 데이터 data()

View : 데이터를 표시하는 화면 templeate

Action : 사용자의 입력에 따라 데이터를 변경하는 methods

단방향 데이터 흐름

View(template)에서 버튼을 클릭했을 때, 클릭이라는 Action(Method)이 발생한다.

Action이 동작을 통해서 State(data)를 변경한다.

 

Vuex의 구조

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

시작은 Vue Components

컴포넌트에서 비동기로직(method를 선언해서 API를 콜하는 부분)인 actions를 콜하고,

Actions가 동기 로직인 Mutations를 호출해서 State(Data)를 변경한다.

 

Actions는 비동기 로직만 처리할 뿐 State(Data)를 직접 변경하지 않고,

Mutations에서만 State(Data)를 변경할 수 있다!

store안에서 5가지 속성

state

getter

mutations

actions

modules

 

 

[ 예시 !]

 

 

 

 

 

 

 

 

 

 

Vuex가 무엇인가요? | Vuex

 

[Vue.js] Vuex란? Vuex의 컨셉과 구조

 

Vuex란? 개념과 예제