在存储对象中移动动作后，我有事件重复

Question

在我的laravel 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 / js / store.js中：

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

在我的混合中定义了verifyMsg（基于https://github.com/euvl/vue-js-modal）：

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

一切正常，直到我将userListDelete方法从Vue文件移至store.js。结果是第一个事件项被删除确定，第二个事件引发错误，即未找到该项，并且我不知道事件被加倍...

如何解决？

更新的块： 我仍在寻找有效的决定：我将现场演示上传到：http : //178.128.145.48/login demo@demo.com wdemo

http://178.128.145.48/websites-blogs将被打开。请尝试通过左上方菜单https://prnt.sc/nq4qiy上的链接转到“用户列表”， 然后返回几次。当在“用户列表”页面上时，我尝试删除1个用户列表，但该列表被删除了，但是在浏览器的“网络”部分中却收到了几条消息和url：https : //imgur.com/a/4ubFB0g 看起来是重复的事件。而且看起来页面之间的移动数量有所增加。为什么以及如何解决？我使用@ click.prevent触发事件以显示确认删除消息。

有“添加演示数据”以添加更多演示行。

谢谢！

Answer 1

好吧，这很明显。仔细查看Vue组件生命周期图。

每次输入路线时都会安装您的组件。

因此，bus.$on在您每次输入该路径时都会在已安装的块内执行。

我建议您将总线事件处理程序移至其他位置。例如app.js/ App.vue mounted hook或直接进入商店。由于您在处理程序中所做的所有工作都是调用存储操作。