강의

멘토링

커뮤니티

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

awdsza님의 프로필 이미지
awdsza

작성한 질문수

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

공통 컴포넌트 구현(3) - template 속성과 v-if 디렉티브 활용 1

mapgetters와 mapactions 이용시 질문입니다.

작성

·

210

1

안녕하세요 강의 잘 보고있습니다.
 
저는 강의처럼 스토어를 직접 접근하는 대신 mapgetters,mapgetters를 이용하고 있는데, 각 페이지별로 처음 진입시에는 api는 호출이 잘되는데 공통 listItem에는 바인딩이 잘 안됩니다. 그런데 같은 url를 2번 접근하면 그떄서야 공통 listItem에 바인딩이 잘됩니다. 혹시 왜그런지 알수있을까요??
 
<script>
import {mapGetters,mapActions} from 'vuex';
export default {
  methods:{
    ...mapActions({fetchNewsList:'FETCH_NEWS',fetchAskList:'FETCH_ASK',fetchJobsList:'FETCH_JOBS'})
  },
  data(){
    return {
        items:[],
        itemType:'',
    }
  },
  computed:{//계산하다. data를 계산해서 return 하는 유형으로 많이 사용.
    ...mapGetters({news:'getNews',asks:'GET_ASK',jobs:'GET_JOBS'}),
  },
  created(){
      const ROUTENAME = this.$route.name;
      this.itemType = ROUTENAME;
    if(ROUTENAME === 'news'){
        this.fetchNewsList();
        this.items = this.news;
    }else if(ROUTENAME === 'asks'){
        this.fetchAskList();
        this.items = this.asks;
    }else if(ROUTENAME === 'jobs'){
        this.fetchJobsList();
        this.items = this.jobs;
    }
  }
}
</script>

 

 

답변 1

1

캡틴판교님의 프로필 이미지
캡틴판교
지식공유자

안녕하세요, 스토어의 state를 컴포넌트의 data에 연결해서 쓰시는 방법은 지양하시는 게 좋습니다. 코드를 임의로 수정하셔서 말씀하신 현상은 제가 의견 드리기가 어려울 것 같아요!

awdsza님의 프로필 이미지
awdsza

작성한 질문수

질문하기