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

실습 내용과 동일하게 진행중인데 깜박거림이 해결되지 않습니다. 몇시간을 삽질 했는데 이상한 부분이 있어서 질문드립니다.콘솔을 찍어보면 이상한 화면을 두번 뿌리는 부분이 있어서 깜빡거림이 있는데 무엇이 잘못된건지 모르겠습니다.

routes/index.js

    {
      path: "/news",
      name: "news",
      component: NewsView,
      //component: CreateLiteView("news"),
      beforeEnter: (to, from, next) => {
        //라우터가드
        console.log(3);
        Bus.$emit("start:spinner");
        store
          .dispatch("FETCH_LIST", to.name)
          .then(() => {
            console.log(6);
            next();
          })
          .catch((error) => console.log(error));
      },
    },

store/actions.js

  FETCH_LIST({ commit }, pageName) {
    console.log(4);
    return fetchList(pageName)
      .then(({ data }) => {
        console.log(5);
        commit("SET_LIST", data);
      })
      .catch((error) => {
        console.log(error);
      });
  },

components/ListItem.vue

export default {
  computed: {
    listItems() {
      console.log("data");
      return this.$store.getters.fetchedList;
    }
  }
}

mixin/ListMixin.js

import Bus from "../utils/bus.js";
export default {
  mounted() {
    Bus.$emit("end:spinner");
  },
};

콘솔로그 순서로 보면

처음 뉴스페이지에서 새로고침시 3>4>5>6>data 가 찍히고

다음질문페이지로 넘어가면 3>4>5>6>data>data 가 두번 찍힙니다.

깜빡거린다고 말씀주신 부분은 고쳐지지 않네요 ㅠ

store/index.js

  state: {
    news: [],
    ask: [],
    jobs: [],
    list: [],
    user: {},
    item: {},
  },

state 부분을 삭제 해봤더니 data도 하나 찍히고 정상이에요.

state없이도 getters가 되는가 싶기도 하고 영문을 모르겠습니다. 

vue 개발자 도구에서도 vuex에 sate가 등록되어있습니다. 분명히 제거했는데.. ㅠ

---------------------추가----------------

깃에서 13번 브랜치 받아서 돌려봤는데 동일하게 깜빡 거리긴 하네요.  마찬가지로  store에서 state를 없애니깐 엄청 잘됩니다.