0songha0

Vue 상태관리 라이브러리 Pinia 사용밥

Pinia 용어 정리

Pinia란?

Vue 2에서는 Vuex, Vue3에서는 Pinia가 공식 상태 관리 라이브러리입니다.
앱 전역에서 사용되는 상태 데이터를 중앙저장소 Pinia 스토어에서 관리할 수 있습니다.

state

앱 전역에서 공유되는 반응형 상태 데이터입니다.

getters

state로 계산한 값을 반환하는 전역 computed 속성입니다.
읽기 전용이며, 캐싱 기능을 갑고 있습니다.

actions

state를 변경하거나 비동기 작업을 수행하는 함수입니다.
사용자 이벤트 핸들러로도 사용됩니다.
Pinia는 Vuex와 달리 Mutations 개념이 없고, actions로 상태 변경을 처리합니다.

Vue 프로젝트 Pinia 적용 방법

Pinia 설치 방법

npm install pinia

프로젝트 루트 경로에서 명령어를 실행하여 Pinia 라이브러리를 설치합니다.
package.json 파일 dependencies 항목에도 자동으로 추가됩니다.

Vue Pinia 사용 설정

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

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

main.js 파일에서 Pinia 인스턴스 생성 후 App 컴포넌트에 사용 설정합니다.

Pinia 사용법

Pinia 스토어 생성 방법

Option API 방식 스토어 정의

import { defineStore } from 'pinia';

// 스토어 정의 후 외부에서 스토어를 사용할 수 있도록 export
export const use데이터분류명Store = defineStore('데이터분류명Store', {
  state: () => ({
    state변수명1: 기본값,
    state변수명2: 기본값,
  }),
  getters: {
    getters함수명1: (state) => {
      return state.state변수명1 * 2;
    },
    getters함수명2() {
      // 화살표 함수가 아닌, 일반 함수에서는 this 키워드로 스토어 인스턴스 접근 가능
      return this.state변수명1 + 1;
    }
  },
  actions: {
    actions함수명1() {
      this.state변수명2 = '변경값';
    },
  },
});

src/stores 폴더 생성 후 데이터분류명Store.js 스토어 파일을 작성합니다.

Composition API 방식 스토어 정의

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const use데이터분류명Store = defineStore('데이터분류명Store', () => {
  const state변수명1 = ref(기본값);
  const state변수명2 = ref(기본값);

  const getters함수명1 = computed(() => {
    return state변수명1.value * 2;
  });

  const actions함수명1 = () => {
    state변수명2.value = '변경값';
  }

  return {
    state변수명1,
    state변수명2,
    getters함수명1,
    actions함수명1
  }
})

Pinia 스토어 사용 방법

<template>
  <p></p>
  <p></p>
  <p></p>
  <button @click="store.actions함수명1()">액션 실행</button>
</template>
<script setup>
import { storeToRefs } from 'pinia';
import { use데이터분류명Store } from '@/stores/데이터분류명Store';

const store = use데이터분류명Store();

// storeToRefs로 상태 변수, getters 구조분해 할당
const { state변수명2, getters함수명1 } = storeToRefs(store);

// actions 구조분해 할당
const { actions함수명1 } = store;
</script>

스토어를 사용하려는 컴포넌트 또는 컴포저블 함수에서 스토어 파일 import 후 사용하면 됩니다.
storeToRefs 함수를 사용하면 state 변수, getters 구조분해 할당 시 반응성을 유지할 수 있습니다.

컴포저블 함수 스토어 사용 예시

import { use데이터분류명Store } from '@/stores/데이터분류명Store';
import { storeToRefs } from 'pinia';

export const use함수명 = () => {
  const store = use데이터분류명Store();

  const { state변수명1 } = storeToRefs(store);
  const { actions함수명1 } = store;

  return {
    state변수명1,
    actions함수명1,
  }
}

위 컴포저블 함수는 아래와 같이 컴포넌트에서 import 후 사용할 수 있습니다.

<script setup>
import { use함수명 } from '@/composables/파일명';

const { state변수명1 } = use함수명();
</script>

최신 글