As I work on developing a straightforward presentation tool using Vue js and Vuex to manage the app state, I am facing a challenge in implementing a feature that tracks changes in the presentation such as title modifications or slide additions/removals. Currently, my Vuex store structure is:
const state = {
presentations: handover.presentations, //an array of objects retrieved from the DB
currentPresentation: handover.presentations[0]
}
Within my Presentation component, the code looks like this:
export default {
template: '#presentation',
props: ['presentation'],
data: () => {
return {
shadowPresentation: ''
}
},
computed: {
isSelected () {
if (this.getSelectedPresentation !== null) {
return this.presentation === this.getSelectedPresentation
}
return false
},
hasChanged () {
if (this.shadowPresentation.title !== this.presentation.title) {
return true
}
return false
},
...mapGetters(['getSelectedPresentation'])
},
methods: mapActions({
selectPresentation: 'selectPresentation'
}),
created () {
const self = this
self.shadowPresentation = {
title: self.presentation.title,
slides: []
}
self.presentation.slides.forEach(item => {
self.shadowPresentation.slides.push(item)
})
}
}
Although I have managed to create a shadow copy of the presentation and detect changes effectively, I am struggling to update the shadow presentation when the actual presentation is saved. Since the savePresentation action is triggered in another component, I am unsure how to capture the 'save' event within the presentation component for updating the shadow presentation. If you have any insights on how I can achieve this functionality, your assistance would be greatly appreciated! Thank you in advance!