[Vue.js][Ch4][영화검색 사이트] About

1. about.js 작성

/* 개발자 / 사용자와 관련된 데이터를 취급하는 파일 */
export default {
  namespaced: true,
  // state는 객체 데이터를 반환
  // 함수로 만든 이유? 
  // 객체 데이터는 배열 데이터와 동일하게 참조형 데이터이다. 
  // => 데이터의 불변성을 유지하려면 함수로 만들어서 반환해야 데이터가 고유해진다.
  state: () => ({
    name: 'EJKIM',
    email: 'ejkim.dev@gmail.com',
    blog: 'https://searchkim.tistory.com',
    phone: '+82-10-6631-6158',
    image: 'https://tistory3.daumcdn.net/tistory/4669904/skinSetting/4a03d2214cc74c7cb8c599a9b55c1a81'
  })
}

• state 옵션은 함수를 이용해 객체 데이터를 반환한다.
  • 함수를 이용하는 이유는?
    • 객체 데이터는 배열 데이터와 동일하게 참조형 데이터이다. 데이터의 불변성을 유지하려면 함수를 이용해서 반환해야 데이터가 고유해진다.

2. about.vue 작성

<template>
  <div class="about">
    <div class="photo">
      <Loader 
        v-if="imageLoading"
        absolute
        />
      <img 
        :src="image" 
        :alt="name">
    </div>
    <div class="name">
      {{  name }}
    </div>
    <div>{{ email }}</div>
    <div>{{ blog }}</div>
    <div>{{ phone }}</div>
  </div>
</template>

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

export default {
  data() {
    return {
      imageLoading: true
    }
  },
  computed: {
    image() {
      return this.$store.state.about.image;
    },
    name() {
      return this.$store.state.about.name;
    },
    email() {
      return this.$store.state.about.email;
    },
    blog() {
      return this.$store.state.about.blog;
    },
    phone() {
      return this.$store.state.about.phone;
    }
  },
  // 라이프사이클에선 비동기를 사용하면 안된다.
  // 그럴 땐, 별도의 비동기 메소드를 만들어서 라이플 사이클에서 호출하면 된다.
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      await this.$loadImage(this.image);
      this.imageLoading = false;
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~/scss/main";    /* 부트스트랩을 사용할 수 있게 import */

.about {
  text-align: center;
  .photo {
    width: 250px;
    height: 250px;
    margin: 40px auto 20px;
    padding: 30px;
    border: 10px solid $gray-300;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: $gray-200;
    position: relative;
    img {
      width: 100%;
      border-radius: inherit;
    }
  }
  .name {
    font-size: 40px;
    font-family: "Oswald", sans-serif;
    margin-bottom: 20px;
  }
}
</style>

 

출력