Я борюсь с шиной событий.
У меня есть список заметок, которые я отображаю дома ('/'). Я использую шину событий для обновления массива в трех разных местах - при удалении, создании или обновлении новой заметки.
После использования различных параметров (удаление + создание, создание + обновление ...) функции, которые запускаются прослушивателем событий, запускаются несколько раз, создавая дублирующиеся элементы или удаляя больше, чем следует.
Я использую одну шину событий для всех них.
Я использую $ один раз и поместил его на созданный хук.
Как узнать, что находится в шине событий, и как ее очистить после ее использования?
//event bus def
var eventBus = new Vue();
export default eventBus;
//the main page, where notes being displayed
template: `
<div>
<h1>this is the home page</h1>
<div class="note-container" v-for="note in notes" :key="note.id">
<component :noteData="note" :is="note.type" class="note" :style="note.style"></component>
</div>
</div>
`,
data() {
return {
notes: []
}
},
created() {
eventBus.$once('noteAdded', data => {
var newNotes = notesService.createNewNote(data)
this.notes = newNotes;
console.log('created activated');
})
eventBus.$once('noteUpdated', note=>{
notesService.updateNote(note)
.then(updatedNotes=>{
this.notes=updatedNotes
console.log('update activated');
})
})
eventBus.$once('noteDeleted', note=>{
notesService.deleteNote(note)
.then(notes=>{
console.log('delete activated');
this.notes=notes
})
})
//where update is being called from
template: `
<div>
<form>
some form
</form>
<button @click="handleUpdate">Update</button>
</div> `,
methods:{
handleUpdate(){
eventBus.$emit('noteUpdated', this.note)
this.$router.push('/')
console.log('handle img');
},
}
//where create is being called from
handleSubmit(){
eventBus.$emit('noteAdded', this.data)
this.$router.push('/')
},