Nuxt3에서 Pinia 사용하기
Nuxt2023-12-08 00:48 (KST)
안녕하세요 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>
Previous Article
[결혼 준비] 웨딩 드레스 소재
Review
Next Article
Nuxt3 프로젝트에서 전역 타입 선언하기
Nuxt