FrontendVueTailwind

[Vue 3] - Pinia 사용하기

Pinia 란?

Pinia 는 Vue 에서 사용하는 상태 관리를 위한 라이브러리입니다. Vue2 에서는 Vuex 를 사용하다가 Pinia 의 등장으로 점차 Pinia 가 대세를 이루게 됐습니다.

Vue 에서는 ref, reactive 와 같은 상태 관리를 할 수 있는 방법들이 있는데 이런 함수들을 이용해 생성된 상태를 다른 페이지로 전달하기 위해서는 props 나 event 혹은 provide 나 inject 를 이용해 전달할 수 있지만, 파일이 많아질수록 추적하기가 복잡해집니다.

Pinia 를 사용하는 이유는 상태를 관리하는 로직을 분리할 수 있고 중앙 집중식 으로 관리할 수 있다는 이점 때문에 그렇습니다.

1. Pinia 설치

npm install pinia

2. Pinia 모듈 추가하기

main.ts
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');

3. Pinia Store 생성

상태들을 저장 및 관리할 수 있는 pinia store 를 생성해줍니다.

store/counterStore.js
import { defineStore } from 'pinia';

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

4. Pinia 사용하기

위에서 생성된 Store 를 통해 Store 내에 있는 값을 가져오거나, Store 내에 있는 상태를 업데이트 해주는 함수를 이용해 Store 값을 변경할 수 있습니다.

<template>
  <div class="app">
    <h1>Counter: {{ counter }}</h1>
    <h2>Double Count: {{ doubleCounter }}</h2>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from './store/counterStore';
import { defineComponent } from 'vue';

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

    return {
      counter: counterStore.count,
      doubleCounter: counterStore.doubleCount,
      increment: counterStore.increment,
      decrement: counterStore.decrement,
    };
  },
});
</script>

<style>
.app {
  text-align: center;
  margin-top: 50px;
}
button {
  margin: 5px;
}
</style>
Share