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

페이지가 /jobs 에서  'news' 를 클릭하여  '/news'로 렌더링 될때,

/jobs 인 상태에서 /news 로 이동하기 전에 미리 list가 news 데이터로 변경이 된 상태에서 /news로 이동하고 스피너가 돌면서 또 news 데이터를 렌더링 해요.

로그를 보면 5와 6 사이에 computed_/jobs 가 찍히는 시점에서 ListItem.vue 의 computed가 호출되고 this.$store.state.list 에는 news 데이터가 바인딩되어있는 거 같아요.

//store/action.js
FETCH_LIST({commit}, pageName){ //context.commit 
        return fetchList(pageName)
        .then(({data}) =>{ //response.data
           console.log(4) 
           commit('SET_LIST', data)
           console.log(5)
           return data;
           })
        .catch(error => console.log(error));
    },

//components/ListItem.vue
computed: {
        listItems() {
            console.log('computed_'+this.$route.path)
            return this.$store.state.list;
        }
    }

//routes/index.js
beforeEnter: (to, from, next) =>{
                bus.$emit('start:spinner')
                store.dispatch('FETCH_LIST', to.name)
                .then(() => {
                    console.log(6);
                    console.log(`fetched ${to.name} Data`);
                    // bus.$emit('end:spinner')
                    next();
                })
                .catch((error)=> console.log(error));
            }