如何深入克隆状态并在Vuex中回滚？ [英] How to deep clone the state and roll back in Vuex?

问题描述

在Vuex中，我想对树中的对象属性进行快照/克隆，对其进行修改，然后以后可能回滚到以前的快照。

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.

背景：

在应用程序中，用户可以在应用某些更改之前对其进行尝试。应用更改时，它们应影响主vuex树。用户还可以单击取消以放弃更改并返回到以前的状态。

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.

示例：

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: {}
}

应用（保存主vuex树中的更改）：

Apply (saves the changes in main vuex tree):

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

有什么好的解决方案ep clone一个状态，对克隆进行更改，然后放弃或应用更改？
这里的示例非常基础，解决方案必须适用于更复杂的对象/树。

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.

编辑1：

有一个名为 vuex-undo-redo 的库，它基本上会记录突变，但存在一些问题。在另一个堆栈溢出主题回到类似在Vue.js vuex上撤消重做，建议使用vuex函数 replaceState（state）。

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).

推荐答案

您可以将 JSON.stringify 和 JSON.parse 与 replaceState 。

在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).

这篇关于如何深入克隆状态并在Vuex中回滚？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！