title: How to deep clone the state and roll back in Vuex?
body: <p>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.</p>
  
  <p><strong>Background:</strong><br>
  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.</p>
  
  <p><strong>Example:</strong>  </p>
  
  <pre><code>state: {
    tryout: {},
    animals: [
      dogs: [
        { breed: 'poodle' },
        { breed: 'dachshund' },
      ]
    ]
  }
  </code></pre>
  
  <p>User enters »Try out« mode and changes one breed from <code>poodle</code> to <code>chihuahua</code>. She then decides either to discard the changes or apply them.</p>
  
  <pre><code>state: {
    animals: [
      dogs: [
        { breed: 'poodle' },
        { breed: 'dachshund' },
      ]
    ],
    tryout: {
      animals: [
        dogs: [
          { breed: 'chihuahua' },
          { breed: 'dachshund' },
        ]
      ]
    }
  }
  </code></pre>
  
  <p><em>Discard</em> (rolls back to previous state):  </p>
  
  <pre><code>state: {
    animals: [
      dogs: [
        { breed: 'poodle' },
        { breed: 'dachshund' },
      ]
    ],
    tryout: {}
  }
  </code></pre>
  
  <p><em>Apply</em> (saves the changes in main vuex tree):  </p>
  
  <pre><code>state: {
    animals: [
      dogs: [
        { breed: 'chihuahua' },
        { breed: 'dachshund' },
      ]
    ],
    tryout: {}
  }
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>Edit 1:</strong><br>
  There is a library called <a href="https://github.com/anthonygore/vuex-undo-redo" rel="nofollow noreferrer">vuex-undo-redo</a>, which basically logs mutations, but has some problems. In another Stack Overflow topic <a href="https://stackoverflow.com/questions/42878329/going-back-to-states-like-undo-redo-on-vue-js-vuex">Going back to States like Undo Redo on Vue.js vuex</a> it is recommended to use the vuex function <code>replaceState(state)</code>.</p>