How to travel in time (rollback) in a state tree using Vuex?

Question

How can I achieve the time travel function with Vuex? I want to return to the previous state in order to undo something.

Is this possible out of the box?

Any idea on how to achieve this?

hoping for something like store.rollback(1)

Answer 1

Just implement it yourself, add prevState to your store, you can choose only those parts that you want to cancel.

Here is a simple example that only supports 1 history record:

score

 const state = { count: 0, prevCount: null } 

mutations:

 const INCREMENT = state => { state.prevCount = state.count state.count += 1 } const UNDO = state => { if (state.prevCount !== null) { state.count = state.prevCount state.prevCount = null } } 

If you need to have more history, just put them in an array

 const state = { count: 0, countHistory: [] } 

and then you can use state.countHistory.pop() and state.countHistory.push(xx) to cancel / save entries

Another solution is a plugin (middleware) if you want to automatically save the entire history.