피니아(pinia) - Vue용 저장소 라이브러리

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/

https://engineering.linecorp.com/ko/blog/pm2-nodejs/#PM2%EB%A5%BC%ED%99%9C%EC%9A%A9%ED%95%9CNode.js%EB%AC%B4%EC%A4%91%EB%8B%A8%EC%84%9C%EB%B9%84%EC%8A%A4%ED%95%98%EA%B8%B0-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9A%B4%EC%98%81%ED%95%98%EA%B8%B0