VueJS - Vuex

카테고리 없음

VueJS - Vuex

whitehorses 2019. 11. 9. 16:40

Vuex

state

state는 스토어에서 관리하고 있는 상태를 나타내며, 컴포넌트로 이야기하면 data라고 할 수 있습니다. 스테이트는 뮤테이션 이외의 장소에서는 변경하면 안됩니다.
```
cnost store = new Vuex.Store({
  state: {
    message = '메시지'
});
```

getter

gatter는 스테이를 추출하기 위한 산출 데이터로, 컴포넌트로 이야기하면 computed와 methods의 중간 기능을 하는 존재입니다. 산출 속성과 다르게 매개변수를 받을 수 있지만 세터 기능은 없습니다. 메서드의 매개변수로 사용할 수 있는 속성 또는 매서드를 전달할 수 있습니다.

정의

cnost store = new Vuex.Store({
  // ...
  gatters: {
    count(state, getters, rootState, rootGetter) {
        return state.count
    }
  }
});

호출
```
store.getters.count
```

게터를 거치지 않고 스테이트에 접근할 수도 있지만, 규칙적으로 반드시 getters를 사용하는 형태로 사용하기 바랍니다.

mutation

state를 변경할 수 있는 방법입니다. 컴포넌트로 이야기하면 methods입니다. 매개변수로 다음과 같은 정보를 받습니다.
1. state: 스테이트
2. pyaload: 커밋에서 전달된 매개변수
```
cnost store = new Vuex.Store({
// ...
mutations: {
mutationType(state, payload) {
 state.count = payload
}
});
```

commit

commit 은 등록되어있는 mutation을 호출할 수 있게 해 주는 인스턴스 메서드 입니다. 컴포넌트의 $emit과 비슷합니다. 임의의 매개변수를 가질 수 있으며, 액션 내부에서도 사용할 수 있습니다.
```
store.commit('mutationType', payload)
```

action

액션은 비동기 처리를 포함할 수 있는 메서드 입니다. 데이터 가공 또는 비동기 처리를 실시한 후 그 결과를 뮤테이션으로 커밋합니다.
```
cnost store = new Vuex.Store({
    // ...
  actions: {
    actionType({ commit }, payload) {
      commit('mutationType')
    }
});
```

dispatch

디스패치(dispatch)는 등록되어 있는 액션을 호출하는 인스턴스 메서드입니다. 다른 액션 내부에서도 사용할 수 있습니다. 임의의 매개변수를 가질 수 있으면 payload를 사용합니다. 이때 payload는 뮤테이션과 같습니다.
호출방법
```
store.dispatch('actionType', payload)
```

Vuex의 규칙

어플리케이션 레벨의 상태는 스토어로 관리하기
상태를 변경하는 것은 뮤테이션 내부에서만 수행하기
비동기 처리는 커밋하기 전에 완료해 두기

참고 사이트: https://rintiantta.github.io/jpub-vue/guide/#%ED%95%99%EC%8A%B5-%ED%8F%AC%EC%9D%B8%ED%8A%B8