vue - vuex (store) 개념

Vue.js의 Vuex 라이브러리를 사용하여 상태 관리를 할 수 있습니다. Vuex는 전역 상태 관리를 가능하게 하고 컴포넌트 간 데이터 공유를 용이하게 합니다.

Vuex를 사용하기 위해서는 다음과 같은 구성 요소가 필요합니다.

state:

애플리케이션의 상태를 저장하는 객체.
state에 담긴 상태 정보는 직접 변경x.

mutations:

state를 변경하는 함수.
이때 함수의 첫 번째 인자는 state입니다.
mutations는 state의 값을 변경하기 때문에 순수해야 합니다.
즉, 비동기 로직이나 인수를 받아 처리하는 등의 부수 효과를 가지면 안됩니다.

actions:

비동기 로직을 처리하는 함수.
actions는 mutations을 호출하거나 다른 actions를 호출할 수 있습니다.
actions 내에서 state 값을 변경x.
대신, mutations를 호출하여 state를 변경합니다.
actions는 commit()이나 dispatch()를 이용해 호출됩니다.

getters:

state를 조회하는 함수.
state 값을 가공하여 반환하거나, state의 일부를 반환하는 등의 로직을 수행할 수 있습니다. getters는 store 객체 내부에서의 계산에만 사용되며, 외부에서는 호출되지 않습니다.
store 객체 내부에서는 this.$store.getters를 통해 호출할 수 있습니다.

// src/store/storeTest.js
const state = {
  count: 0
}

const mutations = {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  }
}

const actions = {
  increment({commit }) {
    commit('increment')
  },
  decrement({commit }) {
    commit('decrement')
  }
}

const getters = {
  getCount(state) {
    return state.count
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}

위 예제에서는 state에 count를 정의하고, mutations에 increment와 decrement 함수를 정의하여 state를 변경합니다. actions에도 increment와 decrement 함수를 정의하여 mutations에 정의된 함수를 실행합니다. 마지막으로 getters에서는 state.count를 반환하는 getCount 함수를 정의합니다.

이제 위에서 정의한 Vuex Store를 컴포넌트에서 사용하려면, store를 인자로 받아야 합니다.

<template>
  <div>
    <h2>Count: {{ count }}</h2>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  name: 'StoreTest',
  computed: {
    count() {
      return this.$store.getters['getCount']
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment')
    },
    decrement() {
      this.$store.dispatch('decrement')
    }
  }
}
</script>

예제에서 computed에서는 getCount를 조회하고, methods에서는 increment와 decrement를 호출합니다. 이 때 $store를 이용하여 Vuex Store에 접근합니다.

이렇게 Vuex Store를 이용하여 전역적인 상태 관리를 할 수 있습니다. 단순한 예제일 뿐, 실제로는 더 복잡한 로직을 처리할 수 있습니다.