Vuex - state, getter, mutations, actions 역할 사용법

안녕하세요.

지난 포스팅에서 Vuex가 무엇인지 언제 사용하는지에 대해서 알아보았습니다.

 

Vuex 상태 관리 라이브러리 설치 방법 사용법

 

이번에는 Vuex를 더 나은 방법으로 사용하기 위해서

state, getter, mutations, actions에 대해서 알아보도록 하겠습니다.

 

State, Getter, Mutations, Actions를 사용해야 하는 이유

  methods: {
    addOne() {
      this.$store.state.counter++;
    },
  },

이전 포스팅에서는 이렇게 직접 state 값을 직접 변경하였습니다.

이렇게 변경하게 되면 문제점이 있습니다.

 

1. state 값을 어디서 변경했는지 파악이 어려워집니다.

2. state 값을을 변경하는 방법이 하나를 더 하는 게 아니고 2를 더하는 것으로 변경된다면, 변경되는 부분을 모두 찾아서 변경해야 합니다.

 

그래서 직접 변경하는 것보다 mutations를 이용해서 변경 하는 것이 Vuex의 핵심 콘셉트에 더 맞는 나은 방법입니다.

 

State 사용법

State는 데이터 저장소 입니다.

여러 컴포넌트 간의 공유는 데이터를 저장합니다.

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

Getter 사용법

State 값 가져오는 계산된 속성입니다.

State 값을 가공할 때 사용하면 유용합니다.

const store = new Vuex.Store({
  state: {
	count: 0
  },
  getters: {
    formatCount: state => {
      return 'count = ' + state.count
    }
  }
})

Mutations 사용법

Mutations는 Vuex의 state 값을 변경하는 메서드입니다. 동기적으로 상태를 변경할 때 사용됩니다.

Vuex 스토에서 상태 변경을 할 때, 반드시 Mutations를 통해서 상태를 변경해야 합니다.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

Actions 사용법

Action은 비동기 작업을 수행하거나, 여러 Mutations를 커밋할 수 있는 메서드입니다.

API 호출 이후 상태를 변경하거나 Mutations를 연속적으로 실행할 때 사용합니다.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
	  }, 1000)
    }
  }
})

 

위 Vuex의 핵심 메서드를 이용하면 상태관리를 더 효율적으로 할 수 있습니다.

State 변경에 대해서 쉽게 파악할 수 있어서 오류의 위험에서 벗어날 수 있습니다.