【Vue.js】undo機能を実装したい

Vue.jsのTODOアプリでundo機能を実装中です。

新規追加→もどる→新規追加、とすると戻れなくなります。
オブジェクトのコピーや参照の問題なのかな？と仮説を立てていますが、うまくいかずに困っています。
コードは全てcodepenにあります。何がおかしいのか、どのようにすればうまく行くのか、アドバイスを頂けたら嬉しいです。
A Pen by hatimitu

行動規範の内容に同意します

回答1件

ベストアンサー

仮説として立てられていた通りとなります。

undo関数内でundoStackの要素を参照コピーされています。
そのため、登録時にundoStackの空配列として用意されていた配列に新しいタスクが追加されてしまい想定していない挙動となっていました。

undoStackの状態変化

初期： [[]]
登録： [[], [<登録1>]]
戻る： [[]]
→ 配列[1]の[<登録1>]を削除し、配列[0]の[]を参照コピー
**登録： [[<登録2>], [<登録2]>] **
→ tasksの配列とundoStackの配列[0]の参照が同じため、
[登録2]が配列[0]に追加され、さらに配列[1]に[登録2]が登録される
**戻る： [[<登録2>]] **
→ 配列[1]が削除され、配列[0]に登録2が残り続ける

(わかりにくい説明で申し訳ありませんm(_ _)m)

解消するためには、戻るボタン押下時の配列[0]のコピーをディープコピーとする必要があります。
以下で解消できると思います。

Javascript
1undo (){
2  const stackCounts = this.undoStack.length
3  if (this.canUndo) {
4    const previousTasks = this.undoStack[stackCounts-2]
5    this.tasks = JSON.parse(JSON.stringify(previousTasks)) // ディープコピー
6    this.undoStack.pop()
7}