Vue.js 상태관리 라이브러리, Vuex

Vuex는 Vue 애플리케이션을 위한 상태관리 라이브러리다.
store라는 중앙 저장소에 데이터를 보관하고, 모든 컴포넌트에서 해당 데이터를 공유하고 사용할 수 있게 도와준다.

기존에는 컴포넌트 간에 데이터를 주고받기 위해 props나 event bus를 사용했지만, 컴포넌트가 많아질수록 구조가 복잡해지고 관리가 어려워진다.
이러한 문제를 해결하기 위해 Vuex를 통해 중앙에서 상태를 관리하는 것이 훨씬 효율적이다.

1) Getters

getters는 state에서 데이터를 가져오는 함수다.
Vue의 computed 속성과 유사하며, getter의 결과는 의존성 기반으로 캐시된다.
즉, 의존하고 있는 state 값이 바뀔 때에만 다시 실행된다.

2) Mutations

mutation은 state를 직접 변경하는 유일한 방법이다.
모든 상태 변경은 mutation을 통해 이뤄지기 때문에, 추적이 쉽고 일관되게 데이터를 관리할 수 있다.

다음은 mutation 정의 및 호출 예시다:

// store.js 내 mutations
mutations: {
  method_name(state, payload) {
    state.value = payload;
  }
}

// 컴포넌트 내에서 호출
this.$store.commit('method_name', newValue);

3) Actions

actions는 mutation을 커밋(commit)해서 상태를 간접적으로 변경한다.
비동기 처리가 가능하기 때문에, API 호출 등 비동기 로직은 보통 actions에서 처리한다.

비동기란 단순히 응답을 기다리는 것이 아니라, 요청 중에도 다른 작업을 동시에 처리할 수 있는 방식을 의미한다.

4) mapState, mapGetters, mapMutations, mapActions

Vuex에서 제공하는 보조 함수(helper)로, 컴포넌트에서 state, getter, mutation, action을 더 간편하게 연결</strong할 수 있게 도와준다.

• mapState: state를 computed 속성에 매핑
• mapGetters: getter를 computed에 매핑
• mapMutations: mutation 호출을 methods에 매핑
• mapActions: action 호출을 methods에 매핑

import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['value'])
  },
  methods: {
    ...mapMutations(['method_name'])
  }
}

5) Mutations와 Actions의 차이점

• Mutation: 동기적 처리 (즉시 실행)
• Action: 비동기적 처리 (비동기 로직 가능)

이처럼 mutation은 상태를 바로 변경하는 데 쓰고, action은 비동기 처리를 담당하며 내부적으로 mutation을 커밋한다.

Vuex를 사용하면 애플리케이션 상태를 한 곳에서 일관성 있게 관리할 수 있어 복잡한 컴포넌트 구조에서도 유지보수가 쉬워진다.