[vue.js+vuetify3+pinia] 전역 모달 (Alert dialog, Confirmation Modal) 만들기 🤔

store 기능을 이용하는 것은 react 쓸 때 redux 접할 때 빼고는 처음 건드려 보는데 pinia는 나름 간단하게 사용할 수 있는 것 같다!

 

전제조건은 vuetify3이 세팅되어 있어야 한다!

 

1. pinia 공식문서를 보고 세팅하기

main.js에 세팅한다

(이번 프로젝트 하면서 느꼈는데 공식문서에 다 나와있다)

https://pinia.vuejs.org/getting-started.html

Pinia | The intuitive store for Vue.js

 

2. 프로젝트 루트에 store폴더 > index.js 만들기

나는 src > store >index.js 로 구성했다.

import { defineStore } from "pinia";
import { ref } from "vue";

export const commonStore = defineStore("somethingStore", () => {
  const snackbar = ref({ text: "", color: ""});

  const setSnackbar = (data) => {
    snackbar.value = data;
  };

  return { snackbar, setSnackbar };
});

스낵바에 들어갈 text와 success/error 구분을 위한 color를 전역으로 받는다고 생각하고 구성한다.

 

https://pinia.vuejs.org/core-concepts/#setup-stores

 

현재는 위 링크의 setup 스타일로 구성했다! option style도 있으니 참고 하면 좋을 것 같다.

 

3. store를 구성했으니 전역적으로 쓸 snackbar를 구성해 보도록 하겠다.

 

전역적으로 쓸 예정이니 App.vue에 작성해본다.

 

<script setup>
import { ref, watchEffect } from "vue";
import { storeToRefs } from "pinia";
import { commonStore } from "@/store";

const store = commonStore();
const { snackbar } = storeToRefs(store);

const data = ref({
  isSnackbarVisible: false,
  snackBarColor: "",
});

const closeSnackbar = (value) => {
  if (!value) {
    data.value.isSnackbarVisible = false;
    store.setSnackbar({ text: "", color: "" });
  }
};

watchEffect(() => {
  if (snackbar.value.text !== "") {
    data.value.isSnackbarVisible = true;
    data.value.snackBarColor = snackbar.value.color
  }
});
</script>

<template>
  <v-snackbar
    v-model="data.isSnackbarVisible"
    :timeout="2000"
    location="top"
    :color="data.snackBarColor"
    @update:model-value="closeSnackbar"
  >
    {{ snackbar?.text }}
    <template v-slot:actions>
      <v-btn variant="text" @click="closeSnackbar"> 닫기 </v-btn>
    </template>
  </v-snackbar>
  <router-view />
</template>

 

4. 완성! 불러와서 써보자~

스낵바를 불러올 페이지에 아래 코드를 import 하고 

import { commonStore } from "@/store";

const store = commonStore();

쓰고 싶은 자리에 맞게 아래 코드를 변형해서 쓰면 된다.

 store.setSnackbarMsg({ text: "에러 발생!", color:'red'  });
 // color에 색상 코드 넣어야 할 수도?

 

 

 

---

23.04.12.

pinia 사용법을 좀 더 봐야 할 듯