Vuex와 store의 관계?

Vuex와 store는 Vue.js 애플리케이션에서 상태 관리를 다룰 때 밀접하게 연결된 개념입니다.

1. Vuex

• Vuex는 Vue.js 애플리케이션 전용 상태 관리 패턴 및 라이브러리입니다.
• 상태(state), 변이(mutations), 액션(actions), 게터(getters)를 사용하여 애플리케이션의 중앙 집중식 상태를 관리합니다.
• Vue 컴포넌트 간에 데이터를 효율적으로 공유하거나 동기화할 수 있도록 설계되었습니다.
• Vuex는 다음과 같은 주요 개념으로 구성됩니다:
  • State: 중앙에서 관리되는 상태.
  • Mutations: 상태를 변경하는 동기적 함수.
  • Actions: 비동기 작업을 처리하거나 mutation을 호출.
  • Getters: 상태를 계산하거나 가공하여 반환.

---

2. Store

• Store는 Vuex에서 상태 관리를 구현하기 위해 생성하는 구체적인 인스턴스입니다.
• Vuex는 단순히 라이브러리이고, 이를 기반으로 store 객체를 생성해야 실제 상태 관리를 할 수 있습니다.
• Store는 애플리케이션의 상태와 상태 관리 로직을 담는 객체입니다.
• new Vuex.Store()를 사용하여 생성됩니다.

---

3. Vuex와 Store의 관계

• Vuex는 상태 관리를 위한 구조와 규칙을 제공하는 라이브러리이고, store는 Vuex를 사용하여 상태 관리의 실제 구현체를 생성한 것입니다.
• 애플리케이션 내에서 store는 Vue 인스턴스에 연결되어 컴포넌트 간 상태를 공유하고 관리할 수 있습니다.

---

간단한 예제

Vuex Store 설정

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

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

Vue 컴포넌트에서 store 사용

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount']),
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync']),
  },
};
</script>

---

 

 

728x90

위 코드에서 사용된 Vuex의 요소들을 자세히 설명하겠습니다.

---

1. state

state: {
  count: 0,
}

• state는 Vuex에서 애플리케이션의 중앙 집중식 상태를 저장하는 객체입니다.
• 예를 들어, 현재 예제에서 count는 애플리케이션의 상태로, 컴포넌트 간 공유되거나 변경될 수 있습니다.
• 왜 중앙에서 관리하나요?
  • 컴포넌트가 많아질수록 상태를 개별적으로 관리하면 복잡해지고, 데이터 동기화가 어려워집니다.
  • state는 모든 컴포넌트에서 읽고, 변경할 수 있는 단일 진실의 원천(Single Source of Truth) 역할을 합니다.

---

2. mutations

mutations: {
  increment(state) {
    state.count++;
  },
}

• mutations는 Vuex의 상태(state)를 변경하는 함수들을 정의하는 곳입니다.
• 모든 상태 변경은 동기적이어야 하며, commit() 메서드를 통해 호출됩니다.

  this.$store.commit('increment');
  

• 왜 이런 방식을 사용하나요?
  • Vuex는 상태 변경 과정을 추적 가능하게 만들어 디버깅과 로깅을 쉽게 합니다.
  • 컴포넌트가 직접 상태를 변경하지 않고, 중앙에서 통제되므로 상태 변경 흐름이 명확해집니다.

---

3. actions

actions: {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  },
}

• actions는 상태를 변경하는 작업(즉, mutations 호출)을 수행하지만, 비동기 작업을 처리할 때 주로 사용됩니다.
  • 여기서 incrementAsync는 1초 후에 increment mutation을 호출합니다.
  • Actions는 mutation과 달리 **비동기 작업(예: API 호출)**을 처리할 수 있습니다.

  this.$store.dispatch('incrementAsync');
  

• 왜 타임아웃을 쓰나요?
  • 비동기 작업의 예로 간단한 타임아웃을 사용한 것입니다.
  • 실제 애플리케이션에서는 서버에서 데이터를 가져오는 API 호출 등을 처리하는 데 사용됩니다.

---

4. getters

getters: {
  doubleCount: (state) => state.count * 2,
}

• getters는 상태를 가공하거나 계산된 값을 반환하는 함수입니다.
  • doubleCount는 count의 값을 두 배로 계산합니다.
• 컴포넌트에서 this.$store.getters.doubleCount를 통해 접근하거나, mapGetters 헬퍼를 사용하여 쉽게 연결할 수 있습니다.
• 왜 getters를 쓰나요?
  • 컴포넌트에서 데이터를 직접 계산하거나 가공할 수도 있지만, 중앙에서 관리하면 상태에 대한 계산 로직을 재사용할 수 있습니다.
  • 상태를 계산한 결과값이 여러 컴포넌트에서 필요하다면, 동일한 계산을 여러 곳에 반복할 필요가 없어집니다.

---

728x90

코드 실행 흐름 이해하기

1. 초기 상태
   • state.count는 처음에 0으로 설정됩니다.
2. Increment 버튼 클릭
   • 사용자가 버튼을 눌러 increment mutation을 호출하면 state.count가 즉시 1 증가합니다.

   this.$store.commit('increment');
   

3. Async Increment 버튼 클릭
   • 사용자가 비동기 작업을 트리거하는 버튼을 누르면 incrementAsync action이 실행됩니다.
   • 이 action은 1초 후에 increment mutation을 호출하여 state.count를 증가시킵니다.

   this.$store.dispatch('incrementAsync');
   

4. Double Count 확인
   • state.count가 변경되면, getters.doubleCount가 자동으로 계산된 값을 반환합니다.
   • Vue의 반응성 덕분에 count가 변경되면 이를 사용하는 모든 컴포넌트가 자동으로 업데이트됩니다.

---

요약

• state: 중앙에서 관리되는 상태 데이터. (count)
• mutations: 상태를 변경하는 동기적 함수. (increment)
• actions: 비동기 작업을 처리하고, mutation을 호출하는 함수. (incrementAsync)
• getters: 상태를 가공하거나 계산하여 반환하는 함수. (doubleCount)

이 모든 구조는 애플리케이션 상태를 체계적으로 관리하고, 컴포넌트 간의 데이터 흐름을 명확하게 하기 위해 설계되었습니다.

 

• Vuex는 상태 관리 규칙과 패턴을 제공하는 라이브러리.
• Store는 Vuex를 사용해 만든 애플리케이션의 상태 관리 객체.
• Vue 애플리케이션에서는 store를 Vue에 연결하여 상태를 관리하고 컴포넌트 간 데이터를 공유합니다.