인프런 커뮤니티 질문&답변

모아이님의 프로필 이미지

작성한 질문수

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

[실습] 라우터 네비게이션 가드 실습 및 스피너 종료 시점 변경

깜빡임 문제에 대하여

해결된 질문

22.02.18 17:55 작성

·

780

1

안녕하세요 선생님.

계속 강의를 들으며 공부하던 중에 다른 분들과 비슷하게 불러온 데이터가 화면에 그려졌다가 트랜지션으로 다시 opacity 0 에서 1로 변하는 현상을 보게 되었습니다.

그래서 computed로 되어있던,

<script>
  export default {
    computed: {
      listItems() {
        const name = this.$route.name;
        if (name === 'news') {
          return this.$store.state.news;
        } else if (name === 'ask') {
          return this.$store.state.ask;
        } else {
          return this.$store.state.jobs;
        }
      },
    },
  };
</script>

 

이 부분을 아래와 같이

<script>
  export default {
    data() {
      return {
        listItems: {},
      };
    },
    created() {
      this.listItems = this.$store.state.list;
    },
  };
</script>

computed 대신에 created(생성시점)에 데이터를 가져와서 data 옵션에 담아주어 뿌리게 하여 해결하였는데, 꼭 computed로 처리 하여야 하는 놓치는 부분이 있을지해서 여쭈어봅니다...

불필요한 부분이라던지 알려주시면 정말 감사하겠습니다.

 

그리고 강의 정말 최고입니다. 감사합니다.

 

답변 1

0

장기효(캡틴판교)님의 프로필 이미지

2022. 02. 19. 17:03

안녕하세요 모아이님, computed 대신 state를 직접 접근해서 뿌려주셔도 상관 없습니다 :) 그리고 뷰엑스의 state는 컴포넌트의 data에 담지 말고 바로 쓰시는 게 좋습니다 :)

모아이님의 프로필 이미지
모아이
질문자

2022. 02. 21. 08:19

감사합니다 선생님 !