[Vue] Pinia의 구성 요소

# Pinia 설치

처음 Vite를 이용해서 프로젝트 만들 때, Pinia 추가하기

stores라는 새로운 폴더가 생긴다

counter.js를 확인해보면 상태와 기능이 있다 → 얘네가 중앙 저장소에 저장되는 애들

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도 같이 바뀜