5

In Vuex I would like to take a snapshot / clone of an object property in the tree, modify it, and later possibly roll back to the former snapshot.

Background:
In an application the user can try out certain changes before applying them. When applying the changes, they should effect the main vuex tree. The user can also click «cancel» to discard the changes and go back to the former state.

Example: 

state: {
  tryout: {},
  animals: [
    dogs: [
      { breed: 'poodle' },
      { breed: 'dachshund' },
    ]
  ]
}

User enters »Try out« mode and changes one breed from poodle to chihuahua. She then decides either to discard the changes or apply them.

state: {
  animals: [
    dogs: [
      { breed: 'poodle' },
      { breed: 'dachshund' },
    ]
  ],
  tryout: {
    animals: [
      dogs: [
        { breed: 'chihuahua' },
        { breed: 'dachshund' },
      ]
    ]
  }
}

Discard (rolls back to previous state): 

state: {
  animals: [
    dogs: [
      { breed: 'poodle' },
      { breed: 'dachshund' },
    ]
  ],
  tryout: {}
}

Apply (saves the changes in main vuex tree): 

state: {
  animals: [
    dogs: [
      { breed: 'chihuahua' },
      { breed: 'dachshund' },
    ]
  ],
  tryout: {}
}

What are good solutions to deep clone a state, make changes on the clone, and later on either discard the changes or apply them? The example here is very basic, the solution must work with more complex objects / trees.

Edit 1:
There is a library called vuex-undo-redo, which basically logs mutations, but has some problems. In another Stack Overflow topic Going back to States like Undo Redo on Vue.js vuex it is recommended to use the vuex function replaceState(state).

Pwdr
  • 3,404
  • 1
  • 23
  • 34
  • The state is just an object right, you can deep clone it using any deep clone technique and then refer to the state object you want to use any given time. I don’t see why this is any different from other deep clone cases – Sven van de Scheur Oct 15 '18 at 11:38
  • 1
    I assumed that it would produce unwanted side-effects when cloning / replacing the whole objects (reactivity). – Pwdr Oct 15 '18 at 11:42
  • Hi! What if, you do a deep copy? Check [this](https://stackoverflow.com/a/5344074/5349795). – LakiGeri Oct 15 '18 at 14:22
  • 1
    -1 for vuex-undo-redo, it has caused me a lot of headaches in the past few days. Starting from the fact that it attaches to every. single. component. of your app and tries to undo 37 times after only one mutation – Nikolay Dyankov Apr 14 '19 at 22:00

1 Answers1

3

You can use JSON.stringify and JSON.parse with replaceState.

In vuex:

const undoStates = [];

// save state
undoStates.push(JSON.stringify(state));

// call state (remove from stack)
if (undoStates.length > 0) {
  this.replaceState(JSON.parse(undoStates.pop()));
}

That will create a copy of the entire state, but you can also use a part of the store:

const animalStates = [];

// save state
animalStates.push(JSON.stringify(state.animals));

// call state (remove from stack)
if (animalStates.length > 0) {
  let animals = JSON.parse(animalStates.pop());
  this.replaceState({...state, animals} );
}

This will merge the current state with an object you chose (like animals in this case).

Pwdr
  • 3,404
  • 1
  • 23
  • 34
Daniel
  • 24,073
  • 15
  • 74
  • 123
  • {...state, animals} - What does this do exactly? "state" already has a property called "animals", right? You first spread the state, add animals at the end, destructure it and pass it as an argument to replaceState(). Isn't replaceState receiving (state.fishes, state.animals, state.animals) ? Or am I reading this wrong – Nikolay Dyankov Apr 14 '19 at 21:57
  • sort of... it would receive `(state.fishes, state.animals, animals)`, where `animals` overrides `state.animals` – Daniel Apr 15 '19 at 15:42