Ugh... I need to explain a tricky situation I'm facing. I have a parent component that has two children listening for the same event and performing similar actions (see code snippet below):
mounted() {
EventBus.$on('edit', (data) => {
console.log('service called')
this.showRightSide(data)
})
},
showRightSide(data) {
console.log(data)
// display right-side operator edit page.
this.$store.commit({
type: 'setShownState',
shown: true
})
// giving operator name & operator type
this.$store.commit({
type: 'setOptName',
optName: data.name
})
this.$store.commit({
type: 'setOptType',
optType: data.type
})
},
Incorporating the vue router adds complexity:
{
path: '/main',
name: 'Main',
component: Main,
children: [
{ path: 'service', name: 'Service', component: ServiceContent },
{ path: 'model', name: 'Model', component: ModelContent }
]
},
Shouldn't there be three commits during each 'edit' event?
Initially, there are indeed 3 commits.
However, when switching from '/main/service' to '/main/model', it triggers 6 commits during each 'edit' event (the old ServiceContent component still makes 3 commits and the new ModelContent component contributes another 3).
Returning to '/main/service' results in 9 commits!!!
Devtool screenshot:
https://i.sstatic.net/JBAOe.png
It appears that even after the router-view changes, the old view's component can still receive events. How do I resolve this? (EventBus is simply a global vue instance serving as an event bus)