Vue 프로젝트 에러 메시지 출력과 로딩 애니메이션

 

Vue 프로젝트 에러 메시지 출력과 로딩 애니메이션

 

1. /src/store/movie.js 수정

- message 기본값 추가 (Search for the movie title!)

- 검색이 시작되면 message 초기화

- 검색이 시작되고 끝날때 로딩 true, false 적용

... 생략

export default {
  namespaced: true,
  state: () => ({
    movies: [],
    message: 'Search for the movie title!',
    loading: false
  }),
... 생략

async searchMovies({ state, commit }, payload) {
	if (state.loading) {
		return 
	}
    
	commit('updateState', {
	message: '',
	loading: true
	})
... 생략

try {
	... 생략
} catch (message) {
	... 생략
} finally {
	commit('updateState', {
	loading: false
	})
}
... 생략

 

 

2. /src/components/MovieList.vue 수정

- 영화 목록이 없는 경우 class 'no-result' 추가

- 에러 메시지가 있는 경우 에러 메시지 출력

- 에러 메시지가 없는 경우 영화 포스터 출력

- 로딩 애니메이션 추가

<template>
  <div class="container">
    <div
      :class="{ 'no-result': !movies.length }"
      class="inner">
      <div
        v-if="loading"
        class="spinner-border text-primary"></div>
      <div
        v-if="message"
        class="message">
        {{ message }}
      </div>
      <div
        v-else
        class="movies">
        <MovieItem
... 생략

<script>
import MovieItem from '~/components/MovieItem'

export default {
... 생략
  computed: {
    ... 생략
    loading() {
      return this.$store.state.movie.loading
    }
... 생략
</script>

<style lang="scss" scoped>
@import "~/scss/main";

.container {
  margin-top: 30px;
  .inner {
    background-color: $gray-200;
    padding: 10px 0;
    border-radius: 4px;
    text-align: center;
    &.no-result {
      padding: 70px 0;
    }
  }
  .message {
    color: $gray-400;
    font-size: 20px;
  }
  ... 생략
</style>

 

---

 

참고

https://getbootstrap.com/docs/5.1/components/spinners/

Spinners