Quantcast
Viewing all articles
Browse latest Browse all 3

Answer by António Quadrado for How to update Vue component property when Vuex store state changes?

I ended up solving this problem in a different way than what I asked in the question but it may be of interest for some. So here it goes:

First I abdicated from having my vue store communicating an event to a component since when you use vuex you should have all your app state managed by the vuex store. What I did was to change the presentation object structure from

{    title: 'title',    slides: []}

to something a little more complex, like this

{    states: [{        hash: md5(JSON.stringify(presentation)),        content: presentation    }],    statesAhead: [],    lastSaved: md5(JSON.stringify(presentation))}

where presentation is the simple presentation object that I had at first. Now my new presentation object has a prop states where I will put all my presentation states and each of this states has an hash generated by the stringified simple presentation object and the actual simple presentation object. Like this I will for every change in the presention generate a new state with a different hash and then I can compare my current state hash with the last one that was saved. Whenever I save the presentation I update the lastSaved prop to the current state hash. With this structure I could simple implement undo/redo features just by unshifting/shifting states from states to statesAhead and vice-versa and that's even more than what I intended at first and in the end I kept all my state managed by the vuex store instead of fragmenting my state management and polluting components.

I hope it wasn't too much confusing and that someone finds this helpful.Cheers


Viewing all articles
Browse latest Browse all 3

Trending Articles