Skip to content

시작하기

설치

Vue Mastery Logo Get the Pinia Cheat Sheet from Vue Mastery

선호하는 패키지 관리자로 pinia를 설치합니다:

bash
yarn add pinia
# 또는 npm으로
npm install pinia

TIP

앱이 Vue 2.6.x 이하 버전을 사용하는 경우, 컴포지션 API도 설치해야 합니다: @vue/composition-api. Nuxt를 사용하는 경우, 이 지침을 따라야 합니다.

Vue CLI를 사용하는 경우, 이 비공식 플러그인을 사용해 볼 수 있습니다.

피니아 인스턴스(루트 저장소)를 만들고, 앱에 플러그인으로 전달합니다:

js
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')

Vue 2를 사용하는 경우, 플러그인을 설치하고 앱 루트에 생성된 pinia를 삽입해야 합니다:

js
import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // 다른 옵션들...
  // ...
  // 동일한 `pinia` 인스턴스를
  // 동일한 페이지 내 여러 Vue 앱에서 사용될 수 있음
  pinia,
})

이것은 devtools를 지원합니다. Vue 3에서는 vue-devtools가 아직 필요한 API를 노출하지 않기 때문에, 시간 추적 및 편집과 같은 일부 기능이 여전히 지원되지 않지만, devtools에는 훨씬 더 많은 기능이 있고, 전체적으로 개발자 경험이 훨씬 우수합니다.

스토어란?

스토어는 컴포넌트 트리에 바인딩되지 않은 상태 및 처리해야 할 일의 로직을 가지는 독립적인 것입니다. 즉, 전역 상태를 호스팅합니다. 항상 존재하고 모두가 읽고 쓸 수 있는 컴포넌트와 비슷합니다. state, getters, actions라는 세 가지 개념이 있으며, 이러한 개념은 컴포넌트의 data, computed, methods와 동일하다고 가정해도 무방합니다.

스토어를 사용해야 하는 경우

저장소에는 앱 전체에서 접근할 수 있으므로, 여러 곳에서 사용되는 데이터가 포함되어야 합니다. 예를들어, 탐색메뉴에 표시되는 사용자 정보나 매우 복잡한 다단계 양식(form) 페이지를 통해 보존해야 하는 데이터가 있습니다.

반면에 컴포넌트에서 호스팅할 수 있는 로컬 데이터를 스토어에 포함하는 것을 피해야 합니다. 예를들어, 페이지 내 로컬 앨리먼트의 가시성을 결정하는 상태 데이터가 있습니다.

모든 앱이 글로벌 상태에 대한 접근를 필요로 하는 것은 아니지만, 필요한 경우 피니아가 당신의 삶을 더 쉽게 만들어 줄 것입니다.

스토어를 사용하지 말아야 할 때

때로는 너무 많은 것에 스토어를 사용하게 됩니다. 애플리케이션이 스토어를 과도하게 사용하고 있다고 느낀다면, 스토어의 목적을 다시 생각해 보세요. 즉, 일부 로직은 단순히 composables로 처리해야 하거나 일부 상태는 컴포넌트에 국한되어야 합니다. 이는 Mastering Pinia의 (Not) Overusing stores 수업에서 자세히 다룹니다.

Translated by pinia.vuejs.kr