느린 개발자

Pinia란

Pinia는 2019년 11월경에 Composition API로 Vue용 스토어가 어떻게 생겼는지 재설계하기 위한 실험으로 시작되었습니다. Vue2와 Vue3 모두에게 작동 가능하고 구성된 요소/페이지 내부 상태를 공유할 수 있습니다.  그리고 Vuex와 유사하여 구현하기에 용이합니다.

 

Pinia | The intuitive store for Vue.js

 

개발 환경

2023년 8월 기준으로 Nuxt3와 pinia 환경에 대해서 설명합니다.

• nuxt 3.6.5
• @pinia/nuxt 0.4.11
• pinia 2.1.4

 

설치 방법

Nuxt3 프로젝트가 설치된 상태에서 시작합니다. 설치가 안되어있다면 아래 링크에서 Nuxt3을 시작해 보세요

yarn add pinia @pinia/nuxt
# or with npm
npm install pinia @pinia/nuxt

 

느린 개발자

 

npm을 사용하는 경우 종속성 트리 오류를 해결할 수 없는 ERESOLVE가 발생한다고 합니다.
package.json에 아래와 같이 추가해 주세요.

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@pinia/nuxt": "^0.4.11",
    "nuxt": "^3.6.5",
    "pinia": "^2.1.4",
  },
  "devDependencies": {
    //생략
  },
  "overrides": {
    "vue": "latest"  //npm으로 사용할 경우 이곳에 추가하시면 됩니다.
  }
}

 

nuxt.config.ts에 설정하기

modules에 @pinia/nuxt를 작성하고 imports로 pinia 스토어 모듈을 검색할 디렉터리를 구성합니다. 그리고 pinia 옵션으로 'defineStore'와 HMR 핫모듈 교체 활성화하는데 필요한 'acceptHMRUpdate'를 설정합니다.

// nuxt.config.ts
export default defineNuxtConfig({
  // ... other options
  modules: [
    '@pinia/nuxt',
  ],
  imports: {
    dirs: ['./stores']
  },
  pinia: {
    autoImports: ['defineStore', 'acceptHMRUpdate']
  },
})

 

Pinia 사용하기

먼저 root경로에 stores 폴더를 생성합니다. 그리고 예시로 auth.ts 파일을 만들어봅니다. 

간단한 예시로 아래와 같이 구현해 봅니다.

interface IUser {
  email: string
  name: string
}
// auth 스토어
export const useAuthStore = defineStore('auth', {
  state: () => {
    return {
      user: {
        email: '',
        name: ''
      } as IUser
    }
  },
  getters: {
    getEmail: (state): string => state.user.email
  },
  actions: {
    setUser(data: IUser) {
      this.user = data
    }
  }
})

if (import.meta.hot) {  //HMR
  import.meta.hot.accept(acceptHMRUpdate(useAuthStore, import.meta.hot))
}

 

HMR은 개발 중에 애플리케이션을 수정할 때 페이지를 새로 고치지 않고 변경 사항을 빠르게 반영하는 데 사용됩니다. 

 

Nuxt3 page에서 테스트

page에 index.vue 파일을 생성하고 아래처럼 구현하여 테스트합니다.

스토어를 import 하여 위에서 구현한 actions을 버튼 이벤트로 설정하고 삽입된 데이터를 보기 위해 getters에서 정의한 email데이터를 반응형 객체로 변환하여 사용합니다.

<template>
  <div>
    <v-btn @click="handleLogin">로그인</v-btn>
    <div>{{ getEmail }}</div>
  </div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useAuthStore } from '~/stores/auth'

// 스토어 생성 
const authStore = useAuthStore()
// 반응형 객체로 변환
const { getEmail } = storeToRefs(authStore)

const handleLogin = () => {
  const user = {
    email: 'test@naver.com',
    name: 'kim'
  }
  authStore.setUser(user)
}
</script>
<style scoped></style>

 

storeToRefs는 Pinia에서 제공하는 유틸리티 함수 중 하나로, 스토어의 상태를 reactive 한 Vue ref 객체로 변환하는 데 사용됩니다. Vue의 ref는 반응적인 데이터를 만들고 추적하는 데 사용되며, 컴포넌트에서 상태를 사용할 수 있도록 합니다.