I have event duplication after action was moved in store object

Question

In my laravel 5.8 / vue 2.5.17 / vuex^3.1.0 I have a problem that with dialog opened I have event duplication. I have an event for item deletion :

In my vue file:

...

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

and in 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 (based on https://github.com/euvl/vue-js-modal )is defined in my 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'
            }
        ]
    })
},

it worked ok, until I moved userListDelete method from my vue file into store.js. As a result on 1st event item is deleted ok, the the second item raise error that item was not found and I do not know event is doubled...

How to fix it ?

UPDATED BLOCK : I still search for valid decision : I uploaded live demo at : http://178.128.145.48/login [email protected] wdemo

http://178.128.145.48/websites-blogs will be opened. Please, try to go to “User's lists” by link at top left menu https://prnt.sc/nq4qiy and back several times. When on “User's lists” page I try to delete 1 user list it is deleted, but I got several messages and url in “network” section of my browser : https://imgur.com/a/4ubFB0g Looks like events are duplicated. And looks like that is move between pages number of guplications is raised. Why and how to fix it ? I use @click.prevent in triggering the event to show confirm delete message.

There is “ Add Demo Data” to add more demo rows.

Thanks!

Answer 1

Well, it is quite obvious. Take a closer look at the Vue component lifecycle diagram.

Your component is mounted each time you enter a route.

So, bus.$on inside your mounted block executed each time you enter this route.

I suggest you move bus event handlers to some other location. For example app.js/ App.vue mounted hook or directly into the store. Since all you do inside handler is calling store actions.