태태개발일지 - vue

VUE 

*vuex = 복잡한 애플리케이션의 컴포넌트들을 단순하게 관리할 수 있다.*

 

<리액트랑 뷰랑 비슷하다.>

->  flux 패턴으로 복잡한 애플리케이션의 문제점들을 해결하고 있었다.

그렇기 때문에vue의 리엑티비티와 flux를 공존할 수 있게 하는 방법을 만들어냈다.

 

Vuex

정의: 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리.

React의 Flux 패턴에서 기인함. (앱이 커졌을 때 효과적으로 관리할 수 있는 방법) 

 

Vuex 라이브러리중 state(data),getters(computed),mutations( method ), actions(비동기 method) 를 학습하겠다.

Vuex를 더 쉽게 코딩할 수 있는 Helper기능이있다.

 

 

Flux

MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴. (Undirectional data flow -> 한방향으로 흐른다.)

-> 데이터의 흐름을 예측할 수 없음.

 

 

FLUX에서 사용하는 데이터 흐름

Action                                  ->    Dispatcher                       ->   Model                                 ->    view
(화면에서 발생하는 이벤트)          (데이터를 변경하는 방법)         (화면에 표시할 데이터)               (화면)

 

 

 

Vuex로 해결할 수 있는 문제

1. MVC 패턴에서 발생하는 구조적 오류

2. 컴포넌트 간 데이터 전달 명시

3. 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제

 

 

Vuex 컨셉.

State -> data()

View -> template

Action -> methods

 

ex) vue 클릭시 -> action에서 TODOLIST 라는 메서드 호출 -> state 배열에 값 추가.

 

Mutations에서만 데이터를 바꾸는 State를 사용할 수 있다. (이후 상세하게 업로드 예정)

 

 

 

출처: https://zuminternet.github.io/ZUM-Pilot-dynamic-board/