작업이 스토어 개체로 이동된 후 이벤트 중복이 있습니다.

작업이 스토어 개체로 이동된 후 이벤트 중복이 있습니다.

내 larabel 5.8 / vue 2.5.17 / vuex^3.1.0에서 대화상자가 열리면 이벤트 중복이 발생한다는 문제가 있습니다.아이템 삭제 이벤트가 있습니다.

내 vue 파일에서:

...

mounted() {

    bus.$on('dialog_confirmed', (paramsArray) => {
        if (paramsArray.key == this.deleteFromUserListsKey(paramsArray.user_list_id)) {
            this.runDeleteFromUserLists(paramsArray.user_list_id, paramsArray.index);
        }
    })
    bus.$on('onUserListDeleteSuccess', (response) => {
        this.is_page_updating = false
        this.showPopupMessage("User lists", 'User\'s list was successfully deleted!', 'success');
    })

    bus.$on('onUserListDeleteFailure', (error) => {
        this.$setLaravelValidationErrorsFromResponse(error.message);
        this.is_page_updating = false
        this.showRunTimeError(error, this);
        this.showPopupMessage("User lists", 'Error adding user\'s list !', 'error');
    })


}, // mounted() {

methods: {
    confirmDeleteUserList(user_list_id, user_list_title, index) {
        this.confirmMsg("Do you want to exclude '" + user_list_title + "' user list ?", {
            key: this.deleteFromUserListsKey(user_list_id), user_list_id: user_list_id, index: index
        }, 'Confirm', bus);
    }, //confirmDeleteUserList(id, user_list_title, index) {

    deleteFromUserListsKey(user_list_id) {
        return 'user_list__remove_' + user_list_id;
    },

    runDeleteFromUserLists(user_list_id, index) {
        this.$store.dispatch('userListDelete', { logged_user_id : this.currentLoggedUser.id, user_list_id : user_list_id } );
    }, // runDeleteFromUserLists()  {

및 resources/module/store.module:

state : {
    ...        
    userLists: [],
    ...        
actions : {
userListDelete(context, paramsArray ) {
    axios({
        method: ( 'delete' ),
        url: this.getters.apiUrl + '/personal/user-lists/' + paramsArray.user_list_id,
    }).then((response) => {
        let L = this.getters.userLists.length
        for (var I = 0; I < L; I++) {
            if (response.data.id == this.getters.userLists[I].id) {
                this.getters.userLists.splice(this.getters.userLists.indexOf(this.getters.userLists[I]), 1)
                context.commit('refreshUserLists', this.getters.userLists);
                break;
            }
        }

        bus.$emit( 'onUserListDeleteSuccess', response );
    }).catch((error) => {
        bus.$emit('onUserListDeleteFailure', error);
    });

}, // userListDelete(context, paramsArray ) { 

confirmMsg(https://github.com/euvl/vue-js-modal에 근거)는 mixing에 정의되어 있습니다.

confirmMsg: function (question, paramsArray, title, bus) {
    this.$modal.show('dialog', {
        title: title,
        text: question,
        buttons: [
            {
                title: 'Yes',
                default: true,    // Will be triggered by default if 'Enter' pressed.
                handler: () => {
                    bus.$emit('dialog_confirmed', paramsArray);
                    this.$modal.hide('dialog')
                }
            },
            {
                title: '',       // Button title
                handler: () => {
                } // Button click handler
            },
            {
                title: 'Cancel'
            }
        ]
    })
},

vue 파일에서 store.js로 userListDelete 메서드를 이동할 때까지 정상적으로 동작했습니다.첫 번째 이벤트 아이템은 삭제가 되었기 때문에 두 번째 아이템 상승 에러가 발견되지 않아 이벤트가 2배가 됩니다.

어떻게 고칠까요?

UPDATED BLOCK : 아직 유효한 결정을 검색 중입니다.라이브 데모는 http://http://http.128.198.48/http:/http:/http:/http:/http:/demo@demo.com wdemo

http://http.128.198.48/http-http-http가 열립니다.왼쪽 상단 메뉴 https://prnt.sc/nq4qiy에 있는 "사용자 목록" 링크에 접속하여 여러 번 다시 접속해 보십시오."사용자 목록" 페이지에서 1개의 사용자 목록을 삭제하려고 하면 삭제되지만 브라우저의 "네트워크" 섹션에 여러 개의 메시지와 URL이 표시됩니다.https://imgur.com/a/4ubFB0g 이벤트가 중복된 것 같습니다.그리고 그것은 페이지 간 이동인 것처럼 보인다.왜, 어떻게 고치는가?삭제 확인 메시지를 표시하기 위해 이벤트를 트리거할 때 use@click.pr 이벤트가 발생합니다.

데모 행을 추가하기 위한 "Add Demo Data"가 있습니다.

감사합니다!

글쎄, 그건 꽤 명백해.Vue 컴포넌트의 라이프 사이클 다이어그램을 자세히 살펴봅니다.

구성 요소는 경로를 입력할 때마다 마운트됩니다.

그렇게,bus.$on이 루트에 들어갈 때마다 실행되는 마운트된 블록 내.

버스 이벤트 핸들러를 다른 곳으로 옮길 것을 권장합니다.예를들면app.js/App.vue mounted hook직접 가게로 들어갈 수도 있습니다.핸들러 내부에서 하는 일은 스토어 액션을 호출하는 것뿐입니다.

언급URL : https://stackoverflow.com/questions/56096924/i-have-event-duplication-after-action-was-moved-in-store-object