일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- PWA
- 셀프넘버
- unionfind
- Python
- js
- VITE
- SSAFYcial
- 14658
- 백준
- 머신러닝종류
- 싸피10기
- sqld
- SSAFY
- TypeScript
- 리액트
- QuerySetAPI
- 알고리즘
- pwa적용하기
- db
- git
- queryset
- 싸피
- vitepwa
- SQL
- react
- 데코레이터
- Javascript
- Django
- 싸피셜
- 플로이드워셜
- Today
- Total
Meme's IT
[Vue] Pinia의 구성 요소 본문
# Pinia 설치
처음 Vite를 이용해서 프로젝트 만들 때, Pinia 추가하기
stores라는 새로운 폴더가 생긴다
counter.js를 확인해보면 상태와 기능이 있다 → 얘네가 중앙 저장소에 저장되는 애들
그리고 run server를 해보면 평소와 같지만 개발자도구 → vue를 켜서 보면
Pinia가 생긴 것을 확인할 수 있다
# Pinia의 구조 (flux pattern)
1. store (= counter.js 파일)
중앙 저장소
모든 컴포넌트가 공유하는 상태, 기능 등이 작성된다
파일 이름 변경 가능
2. state(= ref)
반응형 상태, 데이터
3. getters(= computed)
계산된 값
4. actions(= functions)
메서드
5. plugin
애플리케이션의 상태 관리에 필요한 추가 기능을 제공하거나 확장하는 도구나 모듈
애플리케이션의 상태 관리를 더욱 간편하고 유연하게 만들어줌
별도 설정을 통해 추가해야 함
한번씩 써보자
1. state
App.vue에서 중앙저장소에 있는 state를 가져올 수 있다
<script setup>
// App.vue에서
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
console.log(store.count)
</script>
<template>
<div>
<p>{{ store.count }}</p>
<p>{{ newNumber }}</p>
</div>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
console.log(store.count)
const newNumber = store.count + 1
</script>
이런식으로 템플릿에다가도 찍을 수 있고, 가져와서 값을 사용할 수도 있다
중앙 저장소의 값을 바꿀 수도 있을까?
<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
// 이렇게 여기서 중앙저장소 값을 변경할 수 있을까?
store.count = 100
console.log(store.count)
</script>
중앙저장소의 값도 변경할 수 있다!
근데 이렇게 함부로 변경하면 저걸 사용하는 다른 템플릿에서도 다 변경되므로 직접적으로 변경하지 말기!
+ 중앙저장소에 없는 state를 컴포넌트에서 추가할 수 있을까? ❌
2. Getters
getters도 state와 동일하게 가져오면 된다.
<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
console.log(store.doubleCount)
</script>
3. Actions
getters와 달리 state 조작, 비동기, API 호출이나 다른 로직을 진행할 수 있음
<template>
<div>
<p>{{ store.count }}</p>
<p>{{ store.doubleCount }}</p>
<button @click="store.increment()">1증가시키기</button>
</div>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
</script>
버튼을 누를때마다 count는 1씩 증가, count를 참조하는 doubleCount도 같이 바뀜
'FrontEnd > Vue' 카테고리의 다른 글
[Vue] Pinia 써보기 - Todo List 만들기 (0) | 2023.11.13 |
---|---|
[Vue] State Management (0) | 2023.11.13 |
[Vue] Axios (1) | 2023.11.10 |
[Vue] Router(3) Navigation Guard (0) | 2023.11.09 |
[Vue] Router(2) 프로그래밍 방식 네비게이션 (0) | 2023.11.09 |