Vuex

Vuex는 자바스크립트 프레임워크 중 하나인 Vue.js의 공식 전역 상태 관리 라이브러리로 규모가 큰 프로젝트일수록 필수로 채택합니다.

---

Vuex의 구조는 4가지로 나뉩니다.

State

state는 data, 또는 더 간단하게 변수라고 볼 수 있습니다.

이 상태는 나중에 설명드릴 mutation을 통해서만 변경이 가능하고 당연히 mutation을 통해 state가 변경되면 리렌더링 되게 됩니다.

Mutations

mutation은 state를 변경하는 유일한 방법으로 함수로 이루어져 있습니다.

methods와 비슷하다고 보면 됩니다.

함수로 구성되어 있어 인자를 받을 수 있는데 첫 번째 인자는 state를 받을 수 있고, 두 번째 인자는 payload를 받을 수 있습니다.

함수로 구성되어 있지만 직접 호출이 불가하며 commit이라는 키워드를 통해서만 호출할 수 있습니다.

ex)

store.commit('setData', payload)

Actions

action은 mutation과 유사하지만 비동기 작업이 가능합니다.

state를 변경할 필요가 있을 경우 action에서도 commit으로 mutation을 호출하여 변경할 수 있습니다.

action또한 함수로 구성되어 있으며 첫 번째 인자로는 context로 context내부에는 state, commit, dispatch등 속성등이 포함되어 있습니다.

두 번째 인자는 payload입니다.

mutation은 commit을 통해 호출하면 action은 dispatch를 통해 호출합니다.

그리고 context 내부에 dispatch가 있는 것을 보아 action에서 다른 action을 호출할 수 있습니다.

ex)

store.dispatch('setData', payload)

Getters

getter는 computed와 유사합니다.

computed가 data의 연산된 결과를 반환한다면 getter는 state의 연산을 수행하고 결과를 반환합니다.

---

전체적인 예제

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: 'Hello'
  },
  mutations: {
    changeMessage (state, newMsg) {
      state.message = newMsg
    }

  },
  actions: {
    callMutation ({ state, commit }, { newMsg }) {
      commit('changeMessage', newMsg)
    }
  },
  getters: {
    getMsg (state) {
      return `${state.message} => Length : ${state.message.length}`
    }
  }
})