pinia

Pinia는 Vue 3를 위한 상태 관리 라이브러리입니다. 이전 버전의 Vue에서는 주로 Vuex를 사용했지만, Pinia는 Vuex의 다음 버전으로 간주되며, 더 직관적이고 사용하기 쉽게 만들어졌습니다.

Pinia의 주요 특징

1. 간단한 API: Pinia는 Vuex보다 API가 더 간단하고 직관적입니다. 상태 관리에 필요한 개념을 최소화하여 더 쉽게 사용할 수 있습니다.
2. Vue 3와 완벽한 호환: Pinia는 Vue 3의 Composition API와 완벽하게 호환되도록 설계되었습니다. Vue 3에서 상태 관리를 쉽게 구현할 수 있습니다.
3. TypeScript 지원: Pinia는 TypeScript를 자연스럽게 지원하여 타입 안전성을 높여줍니다.
4. 모듈화: Pinia는 상태를 여러 스토어로 분리하여 관리할 수 있습니다. 각 스토어는 모듈처럼 동작하며, 서로 독립적으로 사용할 수 있습니다.
5. DevTools 지원: Pinia는 Vue DevTools를 통해 상태를 시각적으로 디버깅할 수 있도록 지원합니다.

Pinia의 기본 사용 방법

Pinia를 사용하여 상태 관리하는 기본 과정을 간단하게 설명하자면:

1. Pinia 설치: Vue 프로젝트에 Pinia를 설치합니다.

npm install pinia

Pinia 설정: main.js 파일에서 Pinia를 설정하고 사용합니다.

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

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

스토어 생성: Pinia에서는 상태를 관리하기 위해 스토어를 생성합니다. 스토어는 상태(state), 변경 메소드(actions), 계산된 속성(getters)로 구성됩니다.

// src/stores/counter.js
import { defineStore } from 'pinia';

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

스토어 사용: 컴포넌트에서 스토어를 불러와서 사용할 수 있습니다.

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter';

export default {
  setup() {
    const counterStore = useCounterStore();

    return {
      count: counterStore.count,
      increment: counterStore.increment,
    };
  },
};
</script>

Pinia가 하는 일

• 상태 관리: Pinia는 애플리케이션의 전역 상태를 관리합니다. 이를 통해 컴포넌트 간에 데이터를 쉽게 공유할 수 있습니다.
• 상태의 반응성: Pinia는 Vue 3의 반응성 시스템을 사용하여 상태 변경을 자동으로 감지하고 UI를 업데이트합니다.
• 데이터 흐름 간소화: 컴포넌트 간의 데이터 흐름을 간소화하고, 복잡한 prop 전달이나 이벤트 버스의 필요성을 줄여줍니다.

요약

Pinia는 Vue 3를 위한 새로운 상태 관리 라이브러리로, Vuex보다 더 간단하고 사용하기 쉽습니다. Vue 3와 완벽하게 호환되며, 프로젝트에서 상태 관리를 효율적으로 할 수 있도록 도와줍니다.