Pinia 설치하는 방법 Getting Started

Pinia는 Vue 공식 전역 상태 관리 라이브러리입니다. 예전에는 Vuex라는 라이브러리가 있었는데 이제는 Pinia가 새로 생겼습니다. Vuex와 비교해서 더 간단한 API이고 Composition-API 스타일을 제공한다고 합니다. 그리고 가장 중요한 점으로는 타입 스크립트를 지원한다고 합니다.

 

중요한 건 캐릭터가 귀엽다는 점입니다.

 

귀엽지 않나요?

 

우선 프로젝트 디렉토리에 npm이나 yarn을 사용해서 pinia를 설치해줍니다. pnpm도 좋습니다.

 

yarn add pinia
# 또는
npm install pinia
# 또는 
pnpm add pinia

 

그리고 main.ts또는 main.js에 pinia를 추가해줍니다.

 

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

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

 

공식문서 설명을 보니까 스토어는 컴포넌트 트리에 바운드되어있지 않고 전역 상태를 호스팅 한다고 적혀있네요. 

 

export const state = reactive({})같은 코드는 ssr을 했을때 보안 위험성이 있다고 하니까 서버 사이드 렌더링을 만들려면 Pinia를 사용해야겠네요.