[Nuxt.js] 상태 관리 라이브러리 Pinia

Pinia는 Vue.js애플리케이션에서 상태 관리를 위한 라이브러리로, Nuxt.js와 함께 사용될 때 특히 유용합니다. 

Vuex의 후속으로 개발된 Pinia는 더 간결하고 직관적인 API를 제공하며, 
Vue 3의 Composition API와 잘 통합됩니다. 

이 글에서는 Pinia의 기초적인 개념과 사용법에 대해 설명하겠습니다.

 

Pinia란? 

Pinia는 Vue.js 애플리케이션에서 상태 관리를 위한 라이브러리로, Composition API를 기반으로 작동합니다. 

 

- Pinia의 특징

• 간결한 API: Pinia는 Vuex보다 더 간단한 API를 제공합니다. 
  상태, 액션, 게터를 정의하는 방식이 직관적이어서 개발자가 쉽게 이해하고 사용할 수 있습니다.
• Composition API와의 통합: Pinia는 Vue 3의 Composition API를 활용하여 상태 관리를 구현합니다. 
  이를 통해 더 유연하고 재사용 가능한 코드를 작성할 수 있습니다.
• 모듈화: Pinia는 상태를 모듈화하여 관리할 수 있습니다. 
  각 모듈은 독립적으로 상태를 관리하며, 필요에 따라 다른 모듈과 상호작용할 수 있습니다.
• 타입스크립트 지원: Pinia는 TypeScript를 완벽하게 지원합니다. 
  타입 정의를 통해 코드의 안정성을 높이고, 개발 과정에서 발생할 수 있는 오류를 줄일 수 있습니다.
  
  

- Pinia 설치 및 설정

Pinia를 사용하기 위해서는 먼저 프로젝트에 설치해야 합니다.

Nuxt.js 프로젝트에서 Pinia를 설치하려면 다음 명령어를 실행합니다.

npm install pinia

 

설치가 완료되면, Nuxt.js에서 Pinia를 사용할 수 있도록 설정해야 합니다. 

nuxt.config.js 파일에 Pinia 플러그인을 추가합니다.

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
  ],
});

이제 Pinia를 사용할 준비가 완료되었습니다.

 

- Pinia 스토어 생성

Pinia에서 상태를 관리하기 위해서는 스토어를 생성해야 합니다. 

스토어는 상태(state), 액션(actions), 게터(getters)를 포함하는 객체입니다. 

다음은 TypeScript를 사용한 간단한 Store의 예입니다.

import { defineStore } from 'pinia';

interface UserState {
  name: string;
  age: number;
}

export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    name: '',
    age: 0,
  }),
  actions: {
    setName(newName: string) {
      this.name = newName;
    },
    setAge(newAge: number) {
      this.age = newAge;
    },
  },
  getters: {
    isAdult: (state) => state.age >= 18,
  },
});

→ UserState 인터페이스를 정의하여 상태의 타입을 명시했습니다.

useUserStore 스토어는 사용자 이름과 나이를 관리하며, 이름과 나이를 설정하는 액션과 성인 여부를 판단하는 게터를 포함하고 있습니다.

 

- Pinia 스토어 사용하기

스토어를 생성한 후, 컴포넌트에서 이를 사용할 수 있습니다. 

다음은 Vue 컴포넌트에서 Pinia 스토어를 사용하는 방법입니다.

<template>
  <div>
    <h1>User Info</h1>
    <p>Name: {{ userStore.name }}</p>
    <p>Age: {{ userStore.age }}</p>
    <button @click="updateUser">Update User</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useUserStore } from '@/stores/user';

export default defineComponent({
  setup() {
    const userStore = useUserStore();

    const updateUser = () => {
      userStore.setName('John Doe');
      userStore.setAge(25);
    };

    return {
      userStore,
      updateUser,
    };
  },
});
</script>

→  위의 컴포넌트에서는 useUserStore를 호출하여 스토어를 가져오고, 버튼 클릭 시 사용자 정보를 업데이트하는 updateUser 함수를 정의했습니다. 

이렇게 Pinia를 사용하면 상태 관리를 간편하게 할 수 있습니다.