[Vue] Vue 정리하기(8) - Pinia 알아보기 (특징, state 쓰는법)

오늘은 pinia에 대해 알아보겠다

캐릭터는 귀엽고 좋네 ㅋㅋㅋ

 

pinia가 뭐냐면 vuex와 같이 vue에서 사용하는 상태관리 라이브러리이다

vue3에서 지정한 공식 상태관리 라이브러리이다

나도 원래는 vuex를 계속 사용하려 했지만

vue3에서 공식 지정하기도 하고 여러가지 장점이 있어서 pinia에 대해 알아보려고 한다

 

---

특징과 장점

 

1.  가볍고 직관적 api

 

pinia는 vuex보다 더 가볍고 직관적이라고 한다

또한 vue3의 Composition API와 함께 사용되어 vue3에서 vuex보다 더 적합하다고 한다

 

2. TS와 호환

pinia는 타입스크립트와 완전히 호환된다

 

3. 컴포넌트 단위로 상태를 구성할 수 있다

 

뭐 이러한 특징과 장점들이 있고

이제 하나하나 뜯어서 어떻게 사용하는지 알아보자

 

참고로 vuex와 비교하자면 state, getters는 거의 똑같고 vuex의 mutations는 pinia에서 사라져서

pinia에서는 actions에서 바로 state를 변경할 수 있다

 

그리고 vue2,3의 차이와 마찬가지로

store도 옵션api와 비슷하게 옵션 스토어 형식으로 작성할 수 있고

composition api의 셋업 합수와 비슷하게 셋업 스토어로 작성할 수 있다.

나는 셋업 스토어를 중점으로 설명하겠다

 

셋업 스토어를 간단하게 설명하자면

ref() 는 state 속성이 된다

computed()는 getters가 된다

functions()은 actions가 된다

---

state

 

state는 뭐 vuex와 거의 비슷하다고 보면 되겠다

byeworld.ts

vuex와 달라진 점은 스토어를 defineStore 정의한다는 점이고

옵션 스토어 형식으로 작성하려면 state: 어쩌고 저쩌고

이런식으로 작성해야 하겠지만

셋업 스토어 형식으로 작성하면 저렇게 간단하게 state속성을 쓸 수 있다

ByeWorld.vue

컴포넌트에서 state값을 가져와서 쓰기 위해서는 

스토어를 import하고

store를 선언해주고

storeToRefs를 통해 구조분해할당의 방법을 사용하여 state를 가져온다

 

 

위에서 그냥 const { greeting2 } = store 이렇게도 불러올 수 있지만

이렇게 불러오면 반응형 유지를 못해서 값 수정이 안된다.

그래서 storeToRefs를 사용해야 한다

 

또한 state값을 변경하기 위해서는 위에 코드에 나와있는 것처럼

$patch 를 사용해서 바꿔야한다

 

화면을 보면 

 

 

이렇게 돼있는데

(너무 성의없긴 하지만 기능만 알면 되니까 ^^)

인사바꾸기 버튼을 누르면 changeState 함수가 실행되어 

store에 값이 변경되어

 

 

이렇게 greeting2가 바뀌게 된다

---

추가사항

 

꼭 $patch를 안쓰고

store.greeting2 = "바뀐인사??"

이렇게 수정도 가능하고 

불러올때도 구조분해 할당 이용하지 않고 그냥 

store.greeting2 이런식으로 불러올수 있따

---

 

오늘은 pinia가 뭐고 state는 어떻게 사용하는지에 대해 알아봤다

 

다음시간에는 getters와 actions에 대해 알아보자

 

 

 

참고

https://saramin.github.io/2023-06-27-vue3-composition-api-pinia-1/

https://pinia.vuejs.kr/core-concepts/

https://mine-it-record.tistory.com/641