mixin 질문있습니다.

Question

라우트에서 다음과 같이 전부 리스트 컴포넌트를 불러오고 mixin을 하면 왜 처음에 들어간 글 리스트에서 다른 페이지로 갔을 때, 데이터가 업데이트 되지 않는 걸까요??

mixin 내부에서는 route.name에 따라서 넘기는 변수가 달라져서 원래는 각각 페이지에 맞는 데이터가 fetch되어야 하는게 아닌가요??

mixin

import bus from "@/utils/bus";

// mixin
export default {
    // 재사용할 컴포넌트 옵션 & 로직
    created() {
        bus.$emit("start:spinner");
        this.$store
            .dispatch("FETCH_LIST", this.$route.name)
            .then(() => {
                console.log("fetched", this.$route.name);
                bus.$emit("end:spinner");
            })
            .catch((err) => {
                console.error(err);
            });
    },
};

routes/index.js

export const router = new VueRouter({
    mode: "history", // 표시되는 url => root/#/ 형식을 없애줌
    routes: [
        {
            path: "/",
            redirect: "/news",
        },
        {
            path: "/news", // 주소
            name: "news",
            // component: createListView("NewsView"), // HOC
            component: ListView,
        },
        {
            path: "/ask",
            name: "ask",
            component: ListView,
        },
        {
            path: "/jobs",
            name: "jobs",
            component: ListView,
        },
        {
            path: "/user/:id",
            component: UserView,
        },
        {
            path: "/item/:id",
            component: ItemsView,
        },
    ],
});

Answer

안녕하세요, 첨부해 주신 코드만 봤을 때는 문제 상황 파악이 어려운 것 같아요. 강의 내용 다시 한번 확인해 보시고 동일한 소스 코드에서 문제 발생하는지 알려주시겠어요? :)

Answer

안녕하세요 aimzero9303 님, 인프런 AI 인턴이에요.

mixin을 사용하여 route에 따라 데이터를 fetch하는데, 페이지를 이동하고 나서 데이터가 업데이트되지 않는 문제가 발생하는 것 같습니다. 이 문제는 mixin이 created 훅에서 데이터를 fetch하기 때문에 발생할 수 있습니다.

Vue 라이프사이클에서 created 훅은 컴포넌트가 생성되고 데이터가 초기화된 이후에 호출되는 훅입니다. 따라서, 페이지를 이동하고 나서는 해당 컴포넌트가 생성되지 않기 때문에 created 훅이 다시 호출되지 않고 데이터가 업데이트되지 않은 것입니다.

이 문제를 해결하기 위해, mixin 대신 Vue Router의 네비게이션 가드 기능을 사용하여 데이터를 fetch할 수 있습니다. 네비게이션 가드는 페이지를 이동하기 전, 후에 특정 로직을 실행할 수 있도록 도와주는 기능입니다.

예를 들어, beforeRouteUpdate 훅을 사용하여 페이지 이동 후에 데이터를 fetch하는 로직을 구현할 수 있습니다. 이렇게 하면 페이지가 이동될 때마다 데이터를 업데이트할 수 있습니다.

아래는 예시 코드입니다:

export default {
    beforeRouteUpdate(to, from, next) {
        bus.$emit("start:spinner");
        this.$store
            .dispatch("FETCH_LIST", to.name)
            .then(() => {
                console.log("fetched", to.name);
                bus.$emit("end:spinner");
                next(); // 페이지 이동을 계속 진행
            })
            .catch((err) => {
                console.error(err);
                next(false); // 페이지 이동 취소
            });
    },
};

위의 예시 코드에서는 페이지 이동 시 beforeRouteUpdate 훅을 실행하여 데이터를 fetch하고, 이후에 next()를 호출하여 페이지 이동을 계속 진행하게 합니다. 데이터 fetch 중에 오류가 발생하면 next(false)를 호출하여 페이지 이동을 취소할 수도 있습니다.

이렇게 네비게이션 가드를 사용하여 데이터 fetch를 구현하면 페이지 이동 후에 데이터가 업데이트되는 문제를 해결할 수 있습니다. 적용하시면 원하시는 결과를 얻을 수 있을 것입니다. 감사합니다!

aimzero9303

mixin 질문있습니다.

이 글과 비슷한 Q&A

같은 레벨 자식에서의 이벤트 핸들링 방법 문의

App.vue 내용 변경했는데 창이 연결할수없대요ㅜㅜ

깃허브에 문제있는것 같습니다.

Key값으로 Object 사용가능할까요?