✅ 프로젝트에 Pinia 설치 및 적용
- pinia를 설치해주고,
npm install pinia- main.js파일에 아래와 같이 코드를 작성해준다.
// main.js파일
import { createApp } from 'vue'
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
- pinia를 사용하기 위해서는 store를 정의해야한다.
- src 폴더 아래에 stores라는 폴더를 만들고 그 안에 사용할 store파일 만들어준다. (ex:counter.js)
- 파일안에 아래처럼 코드 작성해주면 된다.
- 아래 useCounterStore라는 이름은 사용할 store이름으로 작명 및 바꿔주면 된다.- 단, 꼭 'use'를 앞에 써서 작명해주기!
import { defineStore } from 'pinia'
// 다른 컴포넌트에서 사용할 수 있게 export해주고
// 가져온 defineStore()에 첫번째 파라미터로 다른 컴포넌트에서 쓸 이름 설정해주고 (='counter')
// 두번째 파라미터로 store에 관련된 옵션을 정의해주면 된다.
export const useCounterStore = defineStore('counter', {
// 상태
state: () => {},
// computed
getters: {},
// method
actions: {},
})
✅ 실제 프로젝트에 적용
// src/stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
// 화살표 함수는 객체 반환시 소괄호 사용 (= return기능)
state: () => ({
counter: 0,
}),
getters: {
doubleCount: state => state.counter * 2,
},
// 상태값을 바꾸고 싶을 떄!
// 여기서 this 쓰는거 유의하기!
actions: {
increment() {
this.counter++
},
},
})
// pinia로 만든 store 사용할 컴포넌트
<template>
<div>
<h2>Store</h2>
<!-- store의 state -->
<p>counter: {{ store.counter }}</p>
<!-- store의 getter -->
<p>doubleCount: {{ store.doubleCount }}</p>
<!-- store의 actions -->
<button @click="store.increment">Click!!</button>
</div>
</template>
<script setup>
import { useRoute } from "vue-router";
import { useCounterStore } from "@/stores/counter";
const route = useRoute();
// 여기가 pinia로 저장된 상태 가져오는 코드!
const store = useCounterStore();
</script>
✅ 알아두면 좋을 pinia 설정법
- composable과 마찬가지로 사용할 store의 이름은 use로 시작하는게 관례이다.
- defineStore()에 들어가는 첫번째 파라미터는 애플리케이션 전체에서 사용할 수 있는 store의 고유한 id 값이라고 생각하면 된다. ( = 컴포넌트에서 꺼낼 때 쓸 이름!! )
- 이러한 아이디는 vueDevtools와 연결하는데 사용된다.
- vueDevtools에서 timeLine누르면 pinia 변화과정 볼 수 있다.
- store에서 this 키워드를 사용하여 상태나 메소드에 접근하기 원하는 경우 화살표함수가 아닌 일반함수로 써줘라!
- pinia로 만들어진 store는 reactive로 래핑된 객체다.
- 이 말은 구조분해할당을 하면 반응성을 잃게 된다는 것!
- 구조분해할당을 하고나서도 반응성 유지를 하고 싶다면 pinia에서 제공하는 storeToRefs를 사용하자.
<script setup>
import { useRoute } from "vue-router";
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";
const route = useRoute();
// store는 reactive로 래핑된 객체다.
// 구조분해할당하면 반응성을 잃게 됨
const store = useCounterStore();
// 구조분해할당하고 싶다면?
const { counter } = storeToRefs(store);
</script>- pinia는 가져온 상태를 해당 컴포넌트에서 바로 수정할 수 있다. 아주 쉽게!
<script setup>
import { useRoute } from "vue-router";
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";
const route = useRoute();
const store = useCounterStore();
const { counter, doubleCount } = storeToRefs(store);
const { increment } = store;
//아래 코드처럼 상태값 수정 가능!!
**counter.value = 100;**
</script>Pinia 공식문서를 보면
1. Vuex보다 더 간단한 API를 제공
2. 컴포지션 API 스타일을 제공
3. TypeScript와 사용할 때 견고한 유형 추론을 지원
Vuex의 mutation과는 다르게 store에서 상태 가져오면 바로 수정할 수 있다는게 가장 편해지지 않았나싶다!
아직 강의에서만 다뤄보고 실제로 pinia를 써보지 않았지만
나중에 사용할 일이 있을 때 오늘 정리한 내용을 토대로 사용해보고 느낀점을 남기길!! 🙏🏻
블로그에 배운거 정리하면서 드는 생각인데
인프런 짐코딩님 강의가 정리가 정말 잘되어있다!! (강의교안도 엄청 정리 잘 되어있음)
vue3 강의도 많이 없던데 ㅎㅅㅎ
좋은 강의 만들어주셔서 감사합니다~~~!!
✅ 배우게 된점!
composable이랑 pinia 강의를 들으면서 배우게 된 게 있다.
바로 소괄호 쓰임새!!
1. 구조분해할당 할 때 소괄호를 사용하면 JavaScript 엔진이 코드를 해석할 때 구조 분해 할당 구문을 더 명확하게 인식하고 올바르게 처리할 수 있다고 한다!
2. 화살표 함수의 소괄호 사용법!
- 아래코드는 동일한 동작을 하는 코드!
- 소괄호를 사용하면 좀 더 단축된 표현을 할 수 있다!
() => {return {name: '이자경}}
() => ({name: '이자경'})➕LEVELUP(1)
적응중