728x90

1. Pinia 설치

yarn 또는 npm을 통해 Pinia를 설치합니다.
설치 명령어는 아래와 같습니다.

yarn add pinia
// or
npm install pinia

2. Pinia 등록

main.js에 Pinia 인스턴스를 만들어 적용시킵니다.

- Vue3의 경우

//main.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')

- Vue2의 경우

1. npm install @vue/composition-api을 통해 @vue/composition-api를 추가로 설치합니다.

2. main.js 에 다음 코드를 추가하여 Pinia를 등록합니다.

import { createPinia, PiniaVuePlugin } from 'pinia'

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

new Vue({  
el: '#app',  
// ...  
// 기존 코드.  
// 아래처럼 pinia를 추가한다  
pinia,  
})

3. 이미 Vue-CLI로 만들어진 프로젝트에 Piani를 추가하는 경우

아래와 같은 에러가 발생한다면, Vue CLI(Vue CLI는 Webpack 4를 사용합니다)를 사용해서일 가능성이 큽니다.

ERROR  Failed to compile with 18 errors

 error  in ./node_modules/pinia/dist/pinia.mjs

Can't import the named export 'computed' from non EcmaScript module (only default export is available)

해결하기 위해서, 에러 해결 포스팅을 참고하세요!

출처 및 참고
Pinia 공식문서