구성 요소가 여러 번 로드되면 eventBus가 중복 이벤트를 수신합니다.

구성 요소가 여러 번 로드되면 eventBus가 중복 이벤트를 수신합니다.

vue.js eventBus에 관한 매우 중요하고 이상한 문제에 직면해 있습니다.

내 코드는 이런거야

mounted: function() {
    eventBus.$on('load-item', () => {
        // some loading data ajax 
    })
}

따라서 이 컴포넌트를 처음 사용하면 한 번만 실행됩니다.단, 다른 컴포넌트로 전환하고 다시 이 컴포넌트로 돌아오면 이벤트는 1회 송신되지만 리스너는 이 기능을 2회 실행하고 있습니다.이 컴포넌트를 방문할 때마다 데이터가 로드됩니다.세 번째 시간 3 Ajax 요청.4번째 4번째 에이잭스 등등.

나는 다음 해결책을 시도했다.

beforeDestroy: function () {
    eventBus.$off('load-item');
}

위의 코드는 수신기를 삭제합니다.컴포넌트를 파괴했을 때만 기능합니까?그러나 내 경우 다른 뷰에서 동일한 컴포넌트를 사용하는 경우 동일한 문제가 발생합니다.

질문입니다. 페이지를 바꿀 때 이벤트 청취자를 완전히 제거하는 가장 좋은 방법은 무엇입니까?

vue.devel에 이미 있는 것이 있습니까?

확실하지 않다면 자세히 설명해 드릴 수 있습니다.

아마 너는 필요할거야eventBus.$once대신eventBus.$on실행 후 $를 한 번 사용하면 다시 초기화되지 않으면 더 이상 호출되지 않습니다.

고유 이벤트 이름인 경우.다음과 같이 적용할 수 있습니다.

mounted: function() {
    if (!eventBus._events['load-item']) {
        eventBus.$on('load-item', () => {
            // some loading data ajax 
        })
    }
}

하지만 이벤트 버스를 이용하는 것보다 vuex를 사용하는 것이 더 낫다는 것을 알고 있습니다.

언급URL : https://stackoverflow.com/questions/49484390/eventbus-is-listening-duplicate-events-when-component-is-loaded-multiple-times