Nuxt - Pinia를 이용해 화면에 로딩바 띄워보기

Pinia 사용 이유

여러 화면에서 전역적으로 로딩바 노출이 조작되어야 하므로, 로딩바 노출 여부 관리를 pinia store를 이용해 관리하려고 합니다. 아래는 실습에 사용한 코드입니다.

필요한 의존성 설치

pnpm install pinia
pnpm install @pinia/nuxt

---

defineStore를 이용해 store 만들기

/store/loading-store.ts

export const useLoadingStore = defineStore({
  id: 'loading',
  state: () => {
    return {
      loadingShow: false
    }
  },
  actions: {
    showLoading(visible: boolean) {
      this.$patch({
        loadingShow: visible
      })
    }
  }
})

id: 'loading'

로딩바 노출 관리 스토어이기 때문에 고유 식별자로 loading을 부여했습니다.

state

loadingShow의 초기값은 false로 설정하여, 로딩바가 우선은 미노출인 상태로 초기값을 세팅했습니다.

actions

boolean 값을 input으로 하는 showLoading 메서드를 정의하여, this.$patch 메서드를 통해 loadingShow의 상태를 업데이트하도록 하였습니다.

---

로딩 다이얼로그 작성

<template>
  <v-dialog v-model="isLoading" persistent max-width="300">
    <v-card class="d-flex align-center justify-center" height="150">
      <v-progress-circular indeterminate color="primary" size="50" class="mr-2"></v-progress-circular>
      <span>Loading...</span>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
const loadingStore = useLoadingStore();
const isLoading = computed(() => loadingStore.loadingShow);
</script>

<style scoped>
.v-card {
  min-width: 200px;
}
</style>

위 로딩 다이얼로그를 components 폴더 하위에 작성하였습니다.

app.vue

<template>
  <div>
    <NuxtPage />
    <MyLoadingDialog />
  </div>
</template>

이후 app.vue에 MyLoadingDialog를 추가하고 다른 컴포넌트나 page에서는 아래와 같이 로딩바 노출여부를 결정했습니다.

// 로딩 다이얼로그
const loadingStore = useLoadingStore();
// 로딩 다이얼로그 노출 시
loadingStore.showLoading(true)
// 로딩 다이얼로그 미노출 시
loadingStore.showLoading(false)