再次关于事件删除项的重复答案

【问题标题】：again about duplications of the event deleting item再次关于事件删除项的重复
【发布时间】：2019-10-21 16:44:14
【问题描述】：

我在这里问I have event duplication after action was moved in store object 关于事件的重复和提议的决定似乎不错，但是在我回到这个问题之后，我遇到了同样的问题成功消息重复。在我的容器 vue 文件 MainApp.vue 中，我设置了事件处理程序：

<template>
   <body class="account-body">
   <v-dialog/>

   <MainHeader></MainHeader>
   <div class="content p-0 m-0" style="width: 100% !important; margin: auto !important;">
      <notifications group="wiznext_notification"/>
      <router-view></router-view>
   </div>
   </body>

</template>

<script>

    import {bus} from '../../app';
    import MainHeader from './MainHeader.vue';
    import { deleteFromUserListsKey, runDeleteFromUserLists } from "../../helpers/commonFuncs";

    export default {
        name: 'main-app',
        components: {MainHeader},
        created() {
            // console.log('resources/js/components/Horizontal/MainApp.vue Component created.')
        },
        mounted() {
            console.log('resources/js/components/Horizontal/MainApp.vue Component MOUNTED.')
            bus.$on('dialog_confirmed', (paramsArray) => {
                // alert( "resources/js/components/Horizontal/MainApp.vue dialog_confirmed  paramsArray::"+var_dump(paramsArray) )
                if (paramsArray.key == this.deleteFromUserListsKey(paramsArray.user_list_id)) {
                    this.runDeleteFromUserLists(paramsArray.user_list_id, paramsArray.user_id, paramsArray.index);
                }
            })
        },

        methods: {
            deleteFromUserListsKey, runDeleteFromUserLists
        }

    }

</script>

我用 click.prevent 调用确认对话框：

<div class="card-footer">
   <div class="float-right">
      <i :class="'mr-2 '+getHeaderIcon('delete')" @click.prevent="confirmDeleteUserList( nextUserList.id, currentLoggedUser.id,
      nextUserList.title, index );" title="Delete"></i>
   </div>

我的混合资源/js/appMixin.js 中的方法被触发，如果用户选择确认 dialog_confirmed 事件被触发：

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'
            }
        ]
    })
},

在我的商店资源/js/store.js OI中定义了删除项目和触发事件的方法：

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 ) {

在删除项目的 list.vue 文件中，我定义了弹出消息：

mounted() {
    console.log("resources/js/components/Horizontal/personal/userLists.vue Mounted()::")
    bus.$on('onUserListDeleteSuccess', (response) => {
        this.is_page_updating = false
        this.showPopupMessage("User lists", 'User\'s list was successfully deleted!', 'success');
        // bus.$off('onUserListDeleteSuccess')
    })

    bus.$on('onUserListDeleteFailure', (error) => {
        this.is_page_updating = false

        if (error.error_code != 11) {
            this.$setLaravelValidationErrorsFromResponse(error.message);
            this.showRunTimeError(error, this);
            this.showPopupMessage("User lists", 'Error adding user\'s list !', 'error');
        }
        // bus.$off('onUserListDeleteFailure')
    })
    this.is_page_loaded = true
    this.setAppTitle("Personal", 'User\'s lists', bus);
}, // mounted() {

我在所有页面的挂载事件中显示消息，我看到 MainApp.vue 的挂载事件仅触发一次，当打开其他页面时我在控制台中查看相关消息。谷歌搜索我找到了 bus.$off 方法，但它对我没有帮助，反正我有几条重复的消息，特别是如果我在不同的页面之间。

如何修复这些重复的消息？

谢谢！

【问题讨论】：

标签： vuejs2 event-handling

【解决方案1】：

我在以下位置找到了决定： Stop receiving events from destroyed child component

所以创建/删除像

这样的事件

created() {
    ...
    bus.$on('onUserListDeleteSuccess', (response) => {
        this.is_page_updating = false
        this.showPopupMessage("User lists", 'User\'s list was successfully deleted!', 'success');
    })

}, //  created() {

beforeDestroy(){
    bus.$off( 'onUserListDeleteSuccess' )
},

对我来说没问题！

【讨论】：