Vue
피니아(pinia) - Vue용 저장소 라이브러리
dev_써니
2023. 3. 14. 14:36
반응형
1.피니아
Pinia는 Vue용 저장소 라이브러리로 구성 요소/페이지 간에 상태를 공유할 수 있다.
1)스토어 정의
import { defineStore } from 'pinia'
export const useapiStore = defineStore('api', {
//use스토어이름Store로 묶는것이 좋음 , 첫번째 인자인 api는 스토어의 고유 id
//두번째 인자는 옵션을 사용할 수 있음, Composition API 의 setup과 유사한 방식의 스토어 정의 방법
state,
getters,
actions
// any amount of arguments, return a promise or not
return{
//위에 정의한 state, getters, actions 를 리턴하여 사용할 수 있음
/*
ref() → state
computed() → getters
function() → actions
*/
}
})
2)사용하기
<template>
<div>
{{스토어에 정의한 무언가}}
</div>
</template>
<script setup lang="ts">
import { use스토어이름Store } from "@/스토어위치";
import { storeToRefs } from "pinia"; //반응형이 유지됨
const store = use스토어이름Store();
const { 스토어에 정의한 무언가 } = storeToRefs(store);
//피니아 사용을 위하여 toRefs가 아닌 storeToRefs를 사용해야 함
</script>
https://pinia.vuejs.org/introduction.html
2. vue EventBus
기존 props를 사용하다가 자식과 부모가 아닌 상태에 이벤트를 보낼때 이벤트 버스를 사용함
너무많이 쓰면 가독성이 떨어짐
1)버스 보내기 : $bus.emit("보낼이벤트명", 옵션데이터);
2)버스 받기
onMounted(() => {
$bus.on("받은이벤트명", 실행할 함수);
});
onBeforeUnmount(() => {
$bus.off("받은이벤트명", 실행할 함수);
});
/*
마운트시 받고 컴포넌트가 사라지기 직전 없애주기
*/
도움받은곳 : https://song8420.tistory.com/379
반응형
3.Broadcast Channel API
-Broadcast Channel API는 브라우징 컨텍스트 (즉, windows , tabs , frames 또는 iframes )와 동일한 출처 의 작업자 간의 기본 통신을 허용
1.통신할 곳 A
import { useBroadcastChannel } from "@vueuse/core";
const { channel, post } = useBroadcastChannel({ name: "채널명" });
/*
isSupported,
channel,
post,
close,
error,
isClosed,
사용할 수 있음
*/
//B에서 온것을 실행시킴
onMounted(() => {
channelValue = channel.value;
channelValue?.addEventListener("message", 실행할 함수);
});
onBeforeUnmount(() => {
channelValue?.removeEventListener("message", 실행할 함수);
});
const 실행할 함수 = (e) => {
if (e.data?.type === "post로 보낸 타입명") { //B에서 받은 타입명
//실행할 함수
}
}
function 함수명(매개변수) {
if (매개변수) {
post({ //B로 보낼것 - post에 담음
type: "post로 보낼 타입명",
});
}
}1.통신할 곳 B
import { useBroadcastChannel } from "@vueuse/core";
const { channel, post } = useBroadcastChannel({ name: "채널명" });
/*
isSupported,
channel,
post,
close,
error,
isClosed,
사용할 수 있음
*/
//여긴 A에서 받은곳을 처리하는곳
onMounted(() => {
channelValue = channel.value;
channelValue?.addEventListener("message", 실행할 함수);
});
onBeforeUnmount(() => {
channelValue?.removeEventListener("message", 실행할 함수);
});
const 실행할 함수 = (e) => {
if (e.data?.type === "post로 보낸 타입명") {
//실행할 함수
}
}
function 함수명(매개변수) {
if (매개변수) {
post({ //A로 보낼것 - post에 담음
type: "post로 보낼 타입명",
});
}
}- 현재 브라우저의 channel 에 내용을 전송한다.
- frame이나 popup 에서도 내용을 전달 받을 수 있다.
- 컴포넌트끼리가 아닌 새창 등으로 내용을 전달하여야 할때 사용한다.
https://vueuse.org/core/useBroadcastChannel/
https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
4. pm2란(Process Manager) : 참조
https://armadillo-dev.github.io/javascript/nodejs/node-js-pm2/
728x90
반응형