Vuex에서 Getter, Mutation, Action의 역할

Vuex는 Vue.js 애플리케이션에서 상태 관리를 체계적으로 할 수 있도록 도와주는 라이브러리입니다. Vuex에서 상태를 관리할 때, getter, mutation, action은 각각의 역할을 수행하며, 이들을 올바르게 이해하고 사용하는 것이 중요합니다.

이 글에서는 Vuex에서 getter, mutation, action의 역할과 그 차이점에 대해 알아보겠습니다.

1. Getter

역할

Getter는 Vuex 상태(state)를 읽을 때 사용됩니다. Vuex의 상태를 가공하거나 필터링하여 컴포넌트에서 쉽게 가져올 수 있게 하며, Vue의 computed 속성처럼 동작합니다.

주로 사용되는 경우

• 상태 값을 그대로 가져와 사용할 때.
• 상태 값을 가공하거나 필터링해서 반환해야 하는 경우.
• 상태 값에 의존한 계산된 데이터를 필요로 하는 경우.

예시

const state = {
  userInfo: { name: 'John', age: 30 }
};

const getters = {
  getUserName: (state) => state.userInfo.name,  // 상태의 특정 값을 반환
  getUserAge: (state) => state.userInfo.age,    // 상태의 특정 값을 반환
};

컴포넌트에서 사용

computed: {
  userName() {
    return this.$store.getters['getUserName'];  // userInfo.name을 가져옴
  },
  userAge() {
    return this.$store.getters['getUserAge'];   // userInfo.age를 가져옴
  }
}

2. Mutation

역할

Mutation은 Vuex 상태(state)를 직접 변경하는 메서드입니다. Vuex의 상태는 직접 변경할 수 없기 때문에 mutation을 통해서만 상태를 변경할 수 있습니다.

제약 사항

동기적으로만 실행되어야 하며, 상태를 변경하는 로직만 포함합니다.

주로 사용되는 경우

• 상태를 즉시 변경해야 하는 경우(예: API 호출 후 데이터를 상태에 저장).

예시

const state = {
  userInfo: { name: '', age: 0 }
};

const mutations = {
  SET_USER_INFO(state, payload) {
    state.userInfo = payload;  // 사용자 정보를 상태에 저장
  }
};

컴포넌트에서 사용

methods: {
  updateUserInfo() {
    this.$store.commit('SET_USER_INFO', { name: 'John', age: 30 });
  }
}

3. Action

역할

Action은 비동기 작업을 처리하거나, 복잡한 로직을 처리하는 곳입니다. 액션은 비동기 작업 후 mutation을 커밋해서 상태를 변경할 수 있습니다.

주로 사용되는 경우

• API 호출, 비동기 작업, 여러 개의 mutation을 연속적으로 실행할 때 사용됩니다.

예시

const actions = {
  async fetchUserInfo({ commit }) {
    const data = await fetchUserApi();  // 비동기 API 호출
    commit('SET_USER_INFO', data);      // mutation을 통해 상태 변경
  }
};

컴포넌트에서 사용

methods: {
  async loadUserInfo() {
    await this.$store.dispatch('fetchUserInfo');  // 액션 호출
  }
}

각 역할 간의 관계

• Getter는 상태를 가져오기 위한 메서드입니다. 상태를 가공하거나 특정 조건을 만족하는 데이터를 추출할 때 사용합니다.
• Mutation은 상태를 변경하는 유일한 방법입니다. 동기적으로 실행되어야 하며, 컴포넌트나 액션에서 호출됩니다.
• Action은 비동기 작업 또는 복잡한 로직을 처리하는 메서드로, mutation을 커밋하여 상태를 변경합니다.

간단한 흐름 예시

1. Action: 비동기 작업을 수행하거나 API 호출을 통해 데이터를 가져옵니다.
2. Mutation: 액션에서 가져온 데이터를 사용해 상태(state)를 변경합니다.
3. Getter: 컴포넌트에서 상태를 가공하거나 그대로 가져옵니다.

요약

• Getter: 상태를 가공하여 반환하는 역할.
• Mutation: 상태를 동기적으로 변경하는 역할.
• Action: 비동기 작업을 처리하고, mutation을 통해 상태를 변경하는 역할.

이 구조를 통해 Vuex는 상태를 중앙 집중식으로 관리하고, 상태 변경과 관련된 로직을 명확하게 분리할 수 있습니다.