[Vue] Vuex

김정민·2022년 6월 17일
0
post-thumbnail

Vuex

Vuex는 중앙 위치에서 상태를 저장하여 어떤 컴포넌트라도 쉽게 상호 작용할 수 있게 돕는 라이브러리다. state , mutations , actions , getter 4가지 형태로 관리가 되며 관리 포인트는 store 라 불린다.

State

Vue component에서는 원본 소스 역할인 data로 볼 수 있고, state는 mutation을 통해서만 변경이 가능하다.

Mutations

유일하게 state를 변경할 수 있는 방법이며 메서드와 유사하고, commit을 통해서만 호출 할 수 있으며 함수로 구현된다.

API를 통해 전달받은 데이터를 mutations에서 가공하여 state를 변경한다.

Actions

비동기 작업이 가능하고, mutation을 호출하기 위한 commit이 가능하다.

action은 dispatch를 통해 호출할 수 있다.

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

Getter

Vue componet의 computed처럼 계산된 속성이다.

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

state의 변경 여부에 따라 view를 업데이트한다.

Vuex의 데이터 흐름

Vuex의 단방향 데이터 흐름

실행 순서

1. Vue Component에서 Dispatch([action method name])를 통해 action을 실행
(ex. 버튼클릭 이벤트발생 등등)

2. Action에서는 외부 Api를 호출하는 등 비동기 로직을 처리

3. 그 결과를 이용해 동기 로직인 Mutaions을 호출
 --> Commit([mutations method name])를 통해 Mutation을 실행

4. Mutation에서 State(data)를 변경

5. getter를 이용하여 다시 Compoent에 바인딩돼 화면을 갱신 

State(data)를 변경할 수 있는 것은 오로지 Mutations

이 안에서 filter, reduce 등 다양한 방법으로 데이터를 가공할 수 있다.

modules에서 각종 목적에 맞는 항목을 분리할 수 있다.

⚠️Vuex 정리⚠️

  • Vuex는 Vue.js에서 사용하는 상태 관리 라이브러리
  • 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리하는 패턴
  • 모든 컴포넌트에서 state에 접근하거나 action을 실행할 수 있음
  • 단순한 App에서 Vuex를 무작정 사용하는 것 보다 props&emit 또는 Event Bus를 사용하는 것이 좋음
    그러나, 중대형 규모의 SPA를 구축하는 경우 Vuex를 통해 Vue컴포넌트 외부의 상태를 보다 잘 처리할 수 있음

출처 : https://bbosong-develop.tistory.com/3 - bbosong - tiStory
출처 : https://velog.io/@yjyoo/vue.js-Vuex-%EC%A0%95%EB%A6%AC - yjyoo

0개의 댓글