[Vue]Vuex 핵심 개념

베하~!

BTC 블랙아웃입니다!!!

 

 

오늘은 이전 포스팅에 이어 Vuex의 핵심 개념을 자세히 알아보겠습니다!

Vuex는 상태 관리 라이브러리로 다음과 같은 5가지 핵심 개념을 가지고 있습니다.

• State
• Getters
• Mutations
• Actions
• Modules

Vuex 설치 및 개념은 이전 포스팅을 참고해주세요!

https://btcd.tistory.com/1149

[Vue] Vuex 개념 및 설치

---

1. State

가장 먼저 Vuex의 State에 대해 알아봅시다.

이전 포스팅에서 Vuex는 상태를 관리하는 라이브러리라고 설명했습니다. 여기서 상태는 Vuex의 State를 말합니다.

Vue의 기본 형태를 예로 들면 State는 각 컴포넌트의 data()와 유사합니다.

new Vue({
  // state
  data() {
    return {
      count: 0
    
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment() {
      this.count++
    }
  }
})

State는 원본 소스라고 생각하시면 됩니다.

 

2. Getters

Getters는 Vue의 computed와 비슷한 역할을 합니다.

Vuex의 Getters를 사용하면 store에 computed와 같이 계산된 속성을 정의하고 사용할 수 있습니다.

Getters는 결과가 캐싱되어 일부 종속성이 변경될 때만 다시 계산됩니다.

 

기본적인 형태는 아래와 같습니다.

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

 

3. Mutations

Mutations은 이름 그대로 상태를 변경하는 역할을 합니다.

State는 직접적으로 변경할 수 없기 때문에 Mutations을 통해 State를 변경합니다.

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment(state) {
      // 상태 변경
      state.count++
    }
  }
})

위의 코드 예시에서 store에 count: 1이라는 State가 있고, increment라는 Mutations 핸들러를 정의하여 사용할 수 있게 됩니다.

Mutations은 직접적으로 호출할 수는 없으며, 이벤트와 유사하게 특정 타입의 Mutations이 발생할 때 핸들러가 실행됩니다. 호출을 위해서는 store.commit('increment')와 같은 방식으로 사용합니다.

 

4. Actions

Actions는 비동기 로직을 포함하는 메서드입니다. API 호출이나 비동기 작업을 처리하는 데 사용됩니다. Mutations은 동기적인 작업만을 처리할 수 있으므로, Actions를 통해 비동기 작업을 수행하고 필요에 따라 Mutations을 호출하여 상태를 변경합니다.

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

위의 코드에서 incrementAsync는 비동기 작업을 처리하는 Action입니다. setTimeout을 사용하여 1초 후에 Mutations인 increment를 호출하고 있습니다. Action은 store.dispatch('incrementAsync')와 같이 호출됩니다.

 

5. Modules

Vuex의 Modules는 State, Mutations, Actions, Getters를 모듈화하여 애플리케이션의 상태를 구성할 수 있게 해줍니다.

큰 규모의 애플리케이션에서 상태가 복잡해지고 관리하기 어려울 수 있으므로, Modules를 사용하여 각 모듈로 구성하고 필요에 따라 중첩된 구조를 만들 수 있습니다.

모듈화된 상태 관리는 코드의 유지보수성과 확장성을 높여줍니다.

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

위의 코드는 두 개의 모듈 moduleA와 moduleB를 정의하고, Vuex의 Store에 modules 속성으로 등록하는 예시입니다.

이렇게 모듈화된 상태 관리를 통해 각 모듈은 독립적으로 상태를 관리하고, 필요한 경우 다른 모듈과 통신할 수 있습니다.

 

---

결론

Vuex를 사용하여 상태 관리를 할 때에는 적절한 상황에 맞게 State, Getters, Mutations, Actions, Modules를 활용해야 합니다.

각 개념은 다음과 같은 역할을 수행합니다:

• State는 애플리케이션의 전역 상태를 저장하고 관리합니다. 컴포넌트 간에 공유되는 중앙 집중화된 상태입니다.
• Getters는 State에 대한 계산된 속성을 제공하며, 상태를 조회할 때 사용됩니다. 필요한 데이터를 추출하거나 계산할 수 있습니다.
• Mutations는 State를 변경하는 메서드로, 동기적인 방식으로만 상태를 변경할 수 있습니다. 변이는 순수한 함수로 작성되어야 하며, 상태를 변경하는 역할을 합니다.
• Actions는 비동기 작업을 처리하는 메서드입니다. 비동기 로직이 필요한 경우 Actions를 사용하여 비동기 작업을 수행하고, 필요한 경우 Mutations을 호출하여 상태를 변경합니다.
• Modules는 애플리케이션의 상태를 모듈화하여 복잡한 상태를 구성하는 도구입니다. 각 모듈로 상태, 변이, 액션, 게터를 구성하고 필요에 따라 중첩된 구조로 만들 수 있습니다. 모듈화된 상태 관리는 코드의 유지보수성과 확장성을 향상시킵니다.

 

Vuex를 활용하여 애플리케이션의 상태를 효율적으로 관리하면 코드의 유지보수성과 확장성을 높일 수 있습니다. 또한 여러 컴포넌트 간에 데이터를 전달하거나 공유해야 할 때 Vuex를 사용하면 간편하고 일관성 있는 상태 관리를 할 수 있습니다.

 

이상으로 Vuex의 핵심 개념에 대한 블로그 포스팅을 마치겠습니다. Vuex를 사용하여 애플리케이션의 상태 관리를 효과적으로 수행할 수 있기를 바랍니다!

 

감사합니다.