javascript – 如何深度克隆状态并在Vuex中回滚？

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

背景：
在应用程序中,用户可以在应用之前尝试某些更改.应用更改时,它们应该影响主vuex树.用户还可以单击“取消”以放弃更改并返回到前一状态.

例：

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

用户进入»试用«模式,将一个品种从贵宾犬改为奇瓦瓦.然后,她决定放弃更改或应用它们.

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

丢弃(回滚到以前的状态)：

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

应用(保存主vuex树中的更改)：

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

什么是深度克隆状态,对克隆进行更改以及稍后放弃更改或应用它们的好解决方案？
这里的示例非常基础,解决方案必须适用于更复杂的对象/树.

编辑1：
有一个名为vuex-undo-redo的库,它基本上记录了突变,但有一些问题.在另一个Stack Overflow主题Going back to States like Undo Redo on Vue.js vuex中,建议使用vuex函数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()));
}

这将创建整个州的副本,但您也可以使用商店的一部分：

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} );
}

这会将当前状态与您选择的对象合并(在本例中为动物).

标签：javascript,clone,deep-copy,vue-js,vuex
来源： https://codeday.me/bug/20190705/1387731.html