在存储对象中移动了动作后，我有事件重复 [英] I have event duplication after action was moved in store object
问题描述
在我的laravel 5.8/vue 2.5.17/vuex ^ 3.1.0中，我遇到一个问题，即打开对话框时，我会发生事件重复. 我有一个用于删除项目的事件:
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 :
在我的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中:
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(基于 https://github.com/euvl/vue-js-modal )是在我的混音中定义的:
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'
}
]
})
},
一切正常，直到我将userListDelete方法从我的Vue文件移到store.js中. 结果是第一个事件项被删除确定，第二个事件引发错误，即未找到该项，并且我不知道事件是否被加倍.
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...
如何修复?
更新的块: 我仍然在寻找有效的决定: 我在以下位置上传了现场演示: http://178.128.145.48/login demo@demo.com wdemo
UPDATED BLOCK : I still search for valid decision : I uploaded live demo at : 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触发事件以显示确认删除消息.
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.
谢谢！
推荐答案
嗯，这很明显. 仔细查看Vue组件生命周期图.
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.
因此，每次输入该路径时，都会在安装的块中执行bus.$on.
So, bus.$on inside your mounted block executed each time you enter this route.
我建议您将总线事件处理程序移至其他位置.例如app.js/App.vue mounted hook或直接进入商店.由于您在处理程序中所做的所有工作都是调用存储操作.
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.
这篇关于在存储对象中移动了动作后，我有事件重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
