Nuxt3에서 Pinia 사용하기

안녕하세요 Lovefield입니다.

Nuxt2에서는 기본적으로 Vuex를 제공했었지만, Nuxt3에서 이 기능은 삭제되었습니다. Nuxt3 에서는 상태 관리자로 Pinia를 주력으로 사용할 수 있습니다. 이번 글에서는 Nuxt3에서 Pinia를 사용할 수 있도록 설정하는 방법을 알려드리겠습니다.

Pinia install

bun add @pinia/nuxt

위의 명령어를 통해 Pinia 모듈을 다운로드합니다. 각자 사용하는 패키지 매니저가 다양한 관계로 부가적인 설명은 하지 않겠습니다.

nuxt.config.ts 설정

export default defineNuxtConfig({
   modules: [["@pinia/nuxt", { autoImports: ["defineStore"] }]],
   imports: {
       dirs: ["stores"],
   },
});

modules 부분에 Pinia를 추가해 줍니다. autoImports 옵션으로 `defineStore` 라는 함수를 자동으로 import 하도록 설정합니다. 설정하지 않으면 매번 스토어 파일에서 defineStore를 사용하도록 `import { defineStore } from 'pinia';`를 선언해야 합니다.

imports 옵션을 통해 “stores” 폴더내의 파일들을 자동으로 import 하도록 설정합니다. 이 옵션을 사용하면 Nuxt가 자동으로 파일을 import 하게 되어 불필요한 import 문들을 사용하지 않아도 됩니다.

stores/global.ts 작성

export const useGlobalStore = defineStore("globalStore", {
   state: (): { name: string } => ({
       name: "",
   }),
   actions: {
       setName(name: string) {
           this.name = name;
       },
       resetName() {
           this.name = "";
       },
   },
});

defineStore 함수를 useGlobalStore 변수에 담아 export 해줍니다. defineStore 함수는 이름, 옵션 순으로 인자를 전달해야 합니다.

state 인자는 실제로 스토어에 담겨 사용할 수 있는 오브젝트입니다. key:value 형태로 구성되어 있으며 언제든지 스토어에서 호출해 사용할 수 있습니다.

actions 인자는 state의 값을 컨트롤하는 용도의 함수 리스트입니다. 직접적으로 state의 값을 바꿀 수도 있지만 그렇게 사용하지 않는 편입니다.

스토어는 페이지를 새로고침 하지 않는다면 초기값으로 돌아가지 않습니다.

다음은 페이지에서 사용하는 예시입니다.

<template>
   <div>
       <p>{{ globalStore.name }}</p>
       <button @click="changeName">Change Name</button>
   </div>
</template>

<script setup lang="ts">
const globalStore = useGlobalStore();

function changeName() {
   if (globalStore.name === "Mario") {
       globalStore.setName("luigi");
   } else {
       globalStore.setName("Mario");
   }
}
</script>