VueX 상태관리

doc : vuex.vuejs.org/kr/

 

상태관련 라이브러리 VueX 모든 컴포넌트가 공유할수있는 집중식 저장소.

 

상태는 앱을 작동하는 원본 소스

뷰는 상태의 선언적 매핑

액션은 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법

 

액션이 바뀌면 상태가 바뀌고 매핑되어있는 뷰가 바뀌는 단방향 데이터가 흐르고있다.

여러개의 컴포넌트가 있을경우, 또는 중첩되는 컴포넌트가 깊어질수록 prop가 장황해질수있음.

그래서 중앙에서 관리할수있는 전역 저장소가 있다면 이 문제를 해결 할 수 있음.

 

1. 상태 (State)

VueX는 단일 상태 트리를 사용.

 

mapState : 컴포넌트가 여러 저장소 상태 속성이나 getter를 사용해야 하는경우에 사용

import {mapState} from 'vuex'

computed : {
  ...mapState([
    'isAddBoard'
  ])
},

 

2.변이 (Mutation)
vuex 저장소에서 상태를 변경하는 유일한 방법.

commit을 통해서 실행

 

mapMutation: 

import {mapMutations} from 'vuex'

methods: {
  ...mapMutations([
    'increment'
  ]),
  ...mapMutations({
    add:'increment'
  })
}

 

3.액션 (Action)

액션은 변이와 유사합니다. 다른점은 상태를 변이시키는 대신 액션으로 변이에 대한 커밋을 함.

작업에는 임의의 비동기 작업이 포함될 수 있다.

디스패치 함수를 통해서 실행한다.

dispatch을 통해서 실행

 

mapActions: 

import {mapActions} from 'vuex'

methods: {
  ...mapActions([
    'increment'
  ]),
  ...mapActions({
    add:'increment'
  })
}