Pinia

Select

Dec 3, 2023

vue 상태 ㄹㅏ이브러리의 기본! (Vuex5에서도 Pinia를 쓸 것임)

vuex와의 차이점

createPinia로 pinia를 생성하고 최상위 컴포넌트의 모듈로 넣어줌. & 정의는 state마다 따로 definePinia로.

vuex: createStore로 바로 정의 및 생성 후 최상위 컴포넌트에 모듈로 넣어줌

mutation이 x ⇒ actions으로 통합

module이 x ⇒ 대신에 definePinia의 첫번째 인수로 상태 이름 정의

actions에서 this 키워드로 바로 state, getters 등에 접근 가능(ex. this.상태데이터)

vuex: context.state.상태데이터

pinia를 일반 의존성으로 설치

createPinia로 생성 후 use로 플러그인 등록!


createApp(App).use(createPinia()).mount('#app')

defineStore로 피니아 정의


import { defineStore } from 'pinia'

export const useCountStore = defineStore('count', {
	state() {
		return {
			count: 1
		}
	},
	getters: {
		double(state) {
			return state.count*2
		}
	},
	actions: {
		increase() {
			this.count += 1
		},
		decrease() {
			this.count -= 1
		}
	}
})

vue 컴포넌트 파일에서 정의한 store를 바로 import한 후, 변수로 등록해서 사용


<script setup lang="ts">
	import { useCountStore } from './store/count'
	
	const countStore = useCountStore()
</script>

<template>
	<h1>{{ countStore.count }}</h1>
	<h2>{{ countStore.double }} </h2>
	<button @click="countStore.increase">Increase</button>
	<button @click="countStore.increase">Increase</button>
</template>

store.$reset() ⇒ 스토어의 전체 상태값 초기화

https://transform.tools/json-to-typescript

⇒ json을 타입스크립트 interface 형태로 변환해주는 사이트

https://omdbapi.com/?apikey=7035c60c&s=${영화이름}