Vuex 스토어 설정 코드 설명과 상황 예

 

아래는 Vuex 스토어 설정 코드에 주석을 추가한 예입니다. 각 섹션의 역할과 사용 목적을 자세히 설명했습니다.

 

store/index.vue 의 내용

// Vuex에서 createStore 함수를 가져옵니다. 
// 이 함수는 Vue 3용 Vuex 스토어를 생성하는 데 사용됩니다.
import { createStore } from 'vuex'

// Vuex 스토어를 생성하고 내보냅니다.
export default createStore({
  // === 상태 (state) ===
  // 애플리케이션의 전역 상태를 정의합니다.
  // 컴포넌트 간에 공유되어야 하는 데이터는 여기서 관리됩니다.
  state: {
    // 예: 사용자 정보, 토큰, 로딩 상태 등을 저장할 수 있음.
    // user: null,
    // isLoading: false,
  },

  // === 게터 (getters) ===
  // state를 기반으로 파생 데이터를 계산하고 반환합니다.
  // 컴포넌트에서 state를 직접 사용하는 대신 getter를 사용하여 데이터를 가져올 수 있습니다.
  getters: {
    // 예: state.user가 null인지 확인하는 getter
    // isAuthenticated: state => !!state.user,
  },

  // === 변이 (mutations) ===
  // state를 동기적으로 수정하는 함수입니다.
  // 변이는 직접적으로 state를 변경할 수 있는 유일한 방법입니다.
  // 반드시 commit()을 통해 호출해야 합니다.
  mutations: {
    // 예: 사용자 정보를 업데이트하는 변이
    // setUser(state, user) {
    //   state.user = user;
    // },
    // setLoading(state, isLoading) {
    //   state.isLoading = isLoading;
    // }
  },

  // === 액션 (actions) ===
  // 비동기 작업(예: API 호출)을 수행하고 변이를 호출합니다.
  // 반드시 dispatch()를 통해 호출해야 합니다.
  actions: {
    // 예: 사용자 데이터를 서버에서 가져와 상태를 업데이트하는 액션
    // async fetchUser({ commit }) {
    //   commit('setLoading', true);
    //   const user = await fetchUserFromAPI();
    //   commit('setUser', user);
    //   commit('setLoading', false);
    // }
  },

  // === 모듈 (modules) ===
  // 대규모 애플리케이션에서 스토어를 모듈로 분리해 관리할 수 있습니다.
  // 각 모듈은 자체 state, mutations, actions, getters를 가질 수 있습니다.
  modules: {
    // 예: auth.js, products.js 같은 모듈을 여기에 추가
    // auth: authModule,
    // products: productsModule
  }
})

---

 

728x90

주요 포인트 설명

1. state:
   • Vuex의 중심으로, 애플리케이션에서 공유하는 데이터 저장소입니다.
   • 전역 상태를 정의하여 모든 컴포넌트에서 액세스할 수 있도록 합니다.
2. getters:
   • 상태(state)의 특정 값을 변환하거나 가공하여 반환하는 데 사용됩니다.
   • 이를 통해 컴포넌트는 중복된 계산 로직 없이 데이터를 가져올 수 있습니다.
3. mutations:
   • 상태를 변경하는 유일한 방법입니다.
   • Vuex에서 상태는 반드시 동기적으로만 수정되어야 합니다.
4. actions:
   • 비동기 작업을 처리하며, 변이를 호출(commit())하여 상태를 변경합니다.
   • API 호출이나 타이머 같은 작업을 처리하는 데 적합합니다.
5. modules:
   • 상태 관리가 복잡해질 경우, 상태와 로직을 여러 모듈로 나눠 관리합니다.
   • 각 모듈은 독립적인 스토어처럼 동작하지만, 최상위 스토어의 일부로 통합됩니다.

 

 

728x90

 

 

 

 

 

다음은 Vuex의 각 섹션을 스토리텔링 형식으로 설명한 예입니다.

---

상황: "식당 관리 앱 만들기"

어느 날, 당신은 식당을 효율적으로 관리할 수 있는 앱을 만들기로 했습니다. 이 앱은 메뉴, 주문, 고객 정보를 처리해야 합니다. 이 작업은 복잡해 보이지만, Vuex를 사용하면 깔끔하게 관리할 수 있습니다.

---

1. state: 데이터 저장소

"상태는 마치 식당의 주방 창고와 같습니다."
앱의 모든 중요한 데이터는 여기 저장됩니다.
예를 들어, 현재의 메뉴, 주문 목록, 그리고 고객 정보를 여기에 보관할 수 있습니다.

state: {
  menu: [ // 메뉴 데이터
    { id: 1, name: "Pasta", price: 12 },
    { id: 2, name: "Pizza", price: 10 }
  ],
  orders: [], // 고객 주문 목록
  customer: null // 현재 로그인한 고객 정보
}

---

2. getters: 데이터 확인하기

"게터는 주방장이 창고에서 재료를 꺼내고 가공하는 것과 같습니다."
예를 들어, 메뉴에서 특정 조건에 맞는 요리만 필터링해서 보여주거나, 주문 총합 금액을 계산할 수 있습니다.

getters: {
  // 비싼 메뉴만 필터링
  expensiveMenu: (state) => {
    return state.menu.filter(item => item.price > 11);
  },
  // 총 주문 금액 계산
  totalOrderPrice: (state) => {
    return state.orders.reduce((total, order) => total + order.price, 0);
  }
}

사용 시나리오:
고객이 "오늘의 스페셜"처럼 비싼 메뉴를 찾을 때, 게터를 사용합니다.
"총 주문 금액이 얼마인가요?"라는 질문에도 바로 대답할 수 있습니다.

---

3. mutations: 데이터 변경하기

"변이는 요리사가 창고에서 재료를 가져와 요리를 준비하는 과정과 같습니다."
데이터를 직접 수정할 수 있는 유일한 방법이며, 항상 동기적으로 실행됩니다.

예를 들어, 새로운 주문이 들어오면 주문 목록에 추가하는 변이가 필요합니다.

mutations: {
  // 새로운 주문 추가
  addOrder(state, order) {
    state.orders.push(order);
  },
  // 현재 고객 정보 업데이트
  setCustomer(state, customer) {
    state.customer = customer;
  }
}

사용 시나리오:

• 고객이 "마르게리타 피자"를 주문했을 때, 주문 목록에 추가합니다.
• 고객이 로그인하면, 고객 정보를 업데이트합니다.

---

4. actions: 비동기 작업 처리

"액션은 주방장이 고객의 특별 요청을 처리하거나, 외부에서 재료를 주문하는 과정과 비슷합니다."
여기서 비동기 작업(예: API 호출)을 처리하고, 필요한 경우 변이를 호출합니다.

예를 들어, 주문 데이터를 서버에 저장하거나, 고객 정보를 가져오는 작업을 액션에서 처리할 수 있습니다.

actions: {
  // 서버에서 메뉴를 가져오기
  async fetchMenu({ commit }) {
    const response = await fetch('/api/menu');
    const menu = await response.json();
    commit('setMenu', menu); // 메뉴 데이터를 변이로 저장
  },
  // 주문 저장
  async placeOrder({ commit }, order) {
    await fetch('/api/orders', {
      method: 'POST',
      body: JSON.stringify(order)
    });
    commit('addOrder', order); // 주문 목록에 추가
  }
}

사용 시나리오:

• 서버에서 최신 메뉴를 가져와야 할 때.
• 고객의 주문을 서버에 저장하고 나서 Vuex 상태도 업데이트해야 할 때.

---

5. modules: 모듈로 분리하기

"모듈은 주방이 너무 커질 때, 섹션별로 나누는 것과 같습니다."
앱이 커질수록 모든 상태를 한 곳에 관리하기 어렵습니다. 따라서 메뉴, 주문, 고객 정보를 각각 모듈로 분리할 수 있습니다.

modules: {
  menu: {
    state: { items: [] },
    mutations: { setMenu(state, menu) { state.items = menu; } },
    actions: { async fetchMenu({ commit }) { /* 서버에서 메뉴 가져오기 */ } },
    getters: { expensiveMenu: (state) => state.items.filter(item => item.price > 11) }
  },
  orders: {
    state: { list: [] },
    mutations: { addOrder(state, order) { state.list.push(order); } },
    actions: { async placeOrder({ commit }, order) { /* 주문 저장 */ } }
  },
  customer: {
    state: { info: null },
    mutations: { setCustomer(state, customer) { state.info = customer; } }
  }
}

---

결론

Vuex는 식당 앱의 데이터와 로직을 체계적으로 관리할 수 있는 강력한 도구입니다.

• state는 데이터 창고
• getters는 데이터를 가공
• mutations는 상태를 변경
• actions는 비동기 작업
• modules는 복잡한 앱을 깔끔하게 나누는 역할을 합니다.

이제 이 앱을 사용해 고객들에게 더 나은 서비스를 제공하세요! 😊

---

이 구조를 통해 Vue 애플리케이션의 상태 관리를 체계적으로 구성할 수 있습니다. 필요에 따라 섹션을 커스터마이즈하며 확장할 수 있습니다! 😊

---