Как глубоко клонировать государство и откатиться на Vuex? - PullRequest
Новая
       35

Как глубоко клонировать государство и откатиться на Vuex?

0 голосов
/ 15 октября 2018

В Vuex я хотел бы сделать снимок / клон свойства объекта в дереве, изменить его, а затем, возможно, вернуться к прежнему снимку.

Фон:
В приложении пользователь может опробовать определенные изменения перед их применением.При применении изменений они должны влиять на основное дерево vuex.Пользователь также может нажать «Отмена», чтобы отменить изменения и вернуться в прежнее состояние.

Пример: 

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

Пользователь входит в режим «Попробовать»и меняет одну породу с poodle на chihuahua.Затем она решает либо отменить изменения, либо применить их. 

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

Каковы хорошие решения для глубокого клонирования состояния, внесения изменений в клон, а затем либо отменить изменения, либо применить их?Пример здесь очень простой, решение должно работать с более сложными объектами / деревьями.

Edit 1:
Существует библиотека с именем vuex-undo-redo , который в основном регистрирует мутации, но имеет некоторые проблемы.В другой теме переполнения стека Возвращаясь к таким состояниям, как Undo Redo на Vue.js vuex , рекомендуется использовать функцию vuex replaceState(state).

1 Ответ

0 голосов
/ 15 октября 2018

Вы можете использовать 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} );
}

Это объединит текущее состояние с выбранным вами объектом (например, с животными в данном случае).

...