Vuex와 Pinia를 활용한 글로벌 상태 관리

Vuex와 Pinia란?

Vue.js에서 상태(state)를 관리하는 대표적인 방법은 **Vuex**와 **Pinia**입니다. 컴포넌트 간 데이터를 공유할 때 props와 emit을 사용할 수 있지만, 프로젝트가 커질수록 **중앙 집중식 상태 관리**가 필요해집니다. Vuex와 Pinia는 이러한 글로벌 상태 관리를 위한 강력한 도구입니다.

1. Vuex란?

Vuex는 Vue.js의 공식 상태 관리 라이브러리로, Flux 아키텍처를 기반으로 합니다.

1.1 Vuex 설치

npm install vuex@next

Vue 3에서는 Vuex 4를 사용해야 합니다.

1.2 Vuex 기본 구조

Vuex는 **state, mutations, actions, getters** 네 가지 핵심 개념을 기반으로 동작합니다.

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

Vue 애플리케이션에서 Vuex를 사용하려면 main.js에 등록해야 합니다.

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

1.3 Vuex 사용 예제

<template>
  <div>
    <p>카운트: {{ count }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
};
</script>

2. Pinia란?

Pinia는 Vuex보다 더 간결하고 사용하기 쉬운 상태 관리 라이브러리입니다. Vuex와 비교하면 **타입스크립트 지원이 뛰어나고, 보일러플레이트 코드가 적습니다.**

2.1 Pinia 설치

npm install pinia

2.2 Pinia 기본 설정

import { createPinia, defineStore } from 'pinia';

const pinia = createPinia();
export default pinia;

Vue 애플리케이션에서 Pinia를 사용하려면 main.js에 등록해야 합니다.

import { createApp } from 'vue';
import App from './App.vue';
import pinia from './store';

const app = createApp(App);
app.use(pinia);
app.mount('#app');

2.3 Pinia 스토어 생성

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
});

2.4 Pinia 사용 예제

<template>
  <div>
    <p>카운트: {{ count }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/store/counter';
const counter = useCounterStore();
const { count, increment } = counter;
</script>

3. Vuex와 Pinia 비교

기능	Vuex	Pinia
설치 용량	더 큼	더 작음
보일러플레이트 코드	많음	적음
타입스크립트 지원	제한적	우수
반응형 상태 관리	mutation 필요	state를 직접 수정 가능

마무리

이번 글에서는 Vue.js의 **Vuex와 Pinia를 이용한 글로벌 상태 관리**에 대해 알아보았습니다.

Vuex의 핵심 개념과 사용법
Pinia의 특징과 사용법
Vuex와 Pinia의 비교

다음 글에서는 **Vue Router를 이용한 페이지 네비게이션**을 다룰 예정입니다. 많은 기대 부탁드립니다! 😊