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

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

confirmMsg（基于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 个用户列表，但它被删除了，但我收到了几条消息 和我浏览器“网络”部分中的网址：https://imgur.com/a/4ubFB0g 看起来事件是重复的。看起来这是在页面之间移动的重复次数增加了。 为什么以及如何解决它？ 我使用@click.prevent 来触发事件以显示确认删除消息。

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

谢谢！

Answer 1

嗯，这很明显。 仔细看看 Vue 组件lifecycle diagram。

您的组件会在您每次输入路线时挂载。

所以，bus.$on 在你每次进入这条路线时都会在你的挂载块中执行。

我建议您将总线事件处理程序移至其他位置。比如app.js/App.vue mounted hook或者直接进店。因为您在处理程序中所做的只是调用存储操作。