pinia란?
❓ Pinia란?
Pinia는 Vue.js에서 사용하는 상태 관리 라이브러리
쉽게 말해, 컴포넌트 간 데이터를 편하게 공유할 수 있도록 도와주는 도구
❓ 왜 Pinia가 필요할까?
Vue에서는 일반적으로
props와emit을 사용하여 부모-자식 간 데이터를 주고받음하지만 컴포넌트가 많아지면 데이터 전달이 복잡해짐
👉 Pinia를 사용하면 어떤 컴포넌트에서도 데이터를 쉽게 가져와서 사용할 수 있다!
pinia
-
Composition API 방식으로 Vue 애플리케이션을 위한 중앙 집중화된 상태관리 기능을 제공
-
Vue3의 공식 상태 관리 라이브러리
- 프로젝트 생성시 추가할지 질문에 yes 답변하면 자동 추가됨
💫 깨알지식
- Reducer 함수는 Redux 같은 라이브러리에서 상태 관리를 위해 사용
- Pinia는 Reducer 없이도 간단하게 상태를 업데이트 가능pinia 아키텍처와 구성 요소
스토어 정의
-
defineStore 함수 이용
- defineStore(’스토어명’, 함수)
-
함수 인자
- 반응형 상태 정의
- 계산된 상태 정의
- 상태에 접근하는 action 함수 정의
- 외부에서 사용할 항목을 객체로 리턴
Pinia에서 스토어(Store)는
”앱 전역에서 공유할 수 있는 상태(state)와 로직(함수, 즉 actions)을 저장하는 곳”
컴포지션 API 방법 적용
| 구성 요소 | 설명 |
|---|---|
defineStore('이름', () => {}) | Composition API 방식의 스토어 생성 |
ref, reactive, computed | Vue의 기본 API를 그대로 사용 |
| 리턴 객체 | 사용하고 싶은 상태와 함수들을 명시적으로 리턴해야 함 |
pinia를 사용하도록 Vue 애플리케이션 설정
- 프로젝트 생성시 pinia 추가하면 자동 생성됨
컴포넌트에서 스토어 사용
- 스토어 import
- setup에서 반응성 있게 연결
컴포지션 API를 사용한 Pinia 스토어 사용법
<<script>
import { useCount1Store } from '@/store/counter.js'; // ✅ Pinia 스토어 가져오기
import { computed } from 'vue'; // ✅ computed 가져오기
export default {
setup() {
const store = useCount1Store(); // ✅ 스토어 인스턴스 생성 (스토어 사용 준비)
const count = computed(() => store.count); // ✅ count 값을 반응형 computed로 생성
const increment = store.increment; // ✅ increment 함수 가져오기
return { count, increment }; // ✅ 템플릿에서 사용할 데이터 반환
}
}
</script>1. useCount1Store()
const store = useCount1Store();counter.js에서 Pinia 스토어를 가져와서store변수에 저장- 이제
store.count,store.increment처럼 스토어 내부 데이터를 사용할 수 있음
2. computed(() => store.count)
const count = computed(() => store.count);store.count는 반응형 상태(state)computed()를 사용하면, count 값이 자동으로 업데이트됨- 즉,
store.count값이 바뀌면count도 자동으로 최신 값 유지
💡 왜 computed를 사용했을까?
→ Pinia의 state는 반응형 객체(Proxy)라서 computed 없이 직접 store.count를 써도 되지만,
→ computed를 사용하면 더 명확하게 읽기 전용 계산된 값처럼 쓸 수 있음
3. store.increment
const increment = store.increment;store.increment는 스토어의 액션(method)store.increment()를 호출하면 상태(state)가 변경됨
💡 여기서 computed를 쓰지 않은 이유?
→ increment는 함수이므로 단순히 바로 가져와서 실행하면 되기 때문!
(반응형 데이터가 아니라, 단순한 메서드)
4. return { count, increment }
return { count, increment };count,increment를 반환하여 템플릿에서 사용할 수 있도록 만듦- 컴포넌트
<template>에서{{ count }},@click="increment"같은 방식으로 사용 가능
🌱 정리 (핵심 개념)
| 코드 | 설명 |
|---|---|
useCount1Store() | Pinia 스토어 가져오기 |
computed(() => store.count) | store의 count 값을 반응형으로 사용 |
store.increment | 스토어의 액션(메서드) 가져오기 |
return { count, increment } | 템플릿에서 사용할 데이터 반환 |
✅ 이 코드를 사용하면 어떻게 동작할까?
count는 store.count를 반응형으로 가져와서 자동 업데이트됨increment()를 호출하면, store의count값이 증가count값이 변경되면, 템플릿에서도 자동으로 반영됨
🍍🍍🍍
