[ Vue ] Pinia Store 이용하기 ( 전역으로 팝업 관리 )

프론트를 개발하다보면 store가 필요한 상황이 많이 발생한다

store는 상태관리로 해당 프로젝트의 모든 곳에서 데이터를 서로 공유할 수 있다.

이로 인하여 데이터 관리가 훨씬 편해지며, 복잡한 과정을 줄일 수 있다.

 

단순하게 타입스크립트를 만들어서 서로 공유할 수는 있지만 이 경우에는 부모 와 자식간의 관계인 경우에 관리가 편하다고 생각하면된다.

같은 instance로 해서 관리해서 다른 컴포넌트간의 데이터를 공유할수는 있지만 관리가 복잡하기에 store를 써서 쉽게 관리할 수 있다.

---

Installment

npm install pinia

 

우선 pinia를 설치

---

Useage

app을 mount하기전에 pinia를 먼저 등록하고 mount를 해주면 된다.

이러면 pinia를 등록해서 pinia store를 사용할 수 있다.

const app = createApp(App)
const pinia = creatPinia()

app.use(ElementPlus)
app.use(router)
app.use(pinia)
app.mount('#app')

 

이후 파일 관리를 위해 store폴더를 만들어서 appStore.ts파일을 만들어서 store를 만들어줬다.

store를 만들때는 defineStore('store 이름',() => {}) 이런식으로 만들면 된다.

 

defineStore로 해당 명칭의 store를 등록할 수 있다.

export const useAppStore = defineStore("app",() => {
})

 

store는 vue에서 사용하는 대부분을 가져와서 사용할 수 있다.

따라서 반응형도 사용할 수 있다.

 

우선 단순하게 store로 팝업들을 관리를 할려고해서 store에서 팝업을 눌렀을때 팝업이 열리고 닫히도록 구현

우선 해당 popup의 show 상태를 boolean으로 관리

export const useAppStore = defineStore("app",() => {
	const showSettingPopup = ref(false)
    
    return {
    	showSettingPopup
    }
})

 

버튼에 onClick이벤트를 걸어두어 store의 showSettingPopup의 상태를 바꿔준다.

이떼 const {showSettingPopup} = useAppStore() 이런식으로 사용할 수 있지만 이렇게 하면 반응형이 깨지게 되어서

appStore자체를 부르고 appStore의 showSettingPopup의 값을 바꿔준다.

const appStore = useAppStore()

const onClickSetting = () => {
  appStore.showSettingPopup = true
}

 

이후 popup이 전역에서 열고 닫고 할 수 있도록 하기 위해서

app.vue에서 popup컴포넌트를 넣고 store에 저장된 변수를 통해 v-if로 해당 팝업을 열고 닫고 기능을 처리한다.

이때 teleport를 활용해 popup은 body에 붙어서 처리

<script setup lang="ts">
import settingPopup from "@/popup/setting/index.vue"
import {useAppStore} from "@/store/module/useAppStore.ts";

const appStore = useAppStore()
</script>

<template>
  <teleport to="body">
    <setting-popup v-if="appStore.showSettingPopup"/>
  </teleport>
</template>

 

이후 popup에서는 닫기 버튼을 눌렀을때는 showSettingPopup의 값을 false로 바꿔준다.

const appStore = useAppStore()

const onClickClose = () => {
  appStore.showSettingPopup = false
}

 

그러면 버튼을 눌렀을때 setting popup이 나오고 닫기 버튼을 누르면 setting popup이 닫히게 된다.

이것은 나중에 다른 컴포넌트에서 사용할때도 단순히 store의 값만 바꾸면 되기 때문에 좀 더 popup들을 전역으로 관리를 쉽게 할 수 있다.