vuex で履歴を実装するためのサンプルコード

インターフェース HistoryItem {
  timestrap: number; // レコードのタイムスタンプ name: string; // レコード名 redo: string; // 変更をやり直す
  undo: string; // 変更を元に戻す
  redoParams: any[]; // Redo Mutation 送信パラメータ undoParams: any[]; // Undo Mutation 送信パラメータ }

インターフェース HistoryStatus {
  historys: HistoryItem[]; // 記録履歴 array_currentHistory: number; // 現在のノードインデックス}

「vuex-module-decorators」から VuexModule、Module、Mutation、Action をインポートします。

@Module({名前空間: true })
エクスポートクラス HistoryModule は VuexModule<HistoryStatus> を拡張し、HistoryStatus を実装します {
  /** 
   * 空のレコードを初期化する主な理由は、リスト操作を容易にするためです。
   * ユーザーが最も古いレコードをクリックすると、ユーザーの操作の最初のステップを正常に元に戻すことができます**/
  公開履歴:HistoryItem[] = [
    {
      名前: `Open`、
      タイムストラップ: Date.now(),
      やり直し: "",
      再実行パラメータ: [],
      元に戻す: "",
      元に戻すパラメータ: [],
    },
  ];
  パブリック_currentHistory: 数値 = 0;

  // ゲッター
  現在の値を取得する(){
    this._currentHistory を返します。
  }

  // ゲッター
  historyList() を取得します: HistoryItem[] {
    this.historys || [] を返します。
  }

  // 履歴を作成 @Mutation
  パブリック CREATE_HISTORY(ペイロード: HistoryItem) {
    this._currentHistory < this.historys.length - 1 の場合 {
      this.historys = this.historys.slice(0, this._currentHistory);
    }
    // js の深いコピーと浅いコピーの問題により、作成時にデータを深くコピーする必要があります // lodash の clone 関数を試してみたいのですが、JSON.stringify の clone メソッドの方が高速であることがわかりました。結局のところ、関数内にデータは存在しません // ここでは変更しません。主にアイデアを表現するためです this.historys.push(_.cloneDeep(payload));
    this._currentHistory = this.historys.length - 1;
  }

  @突然変異
  パブリックSET_CURRENT_HISTORY(インデックス: 数値) {
    this._currentHistory = インデックス < 0 ? 0 : インデックス;
  }

  // @Action をやり直す
  パブリック RedoHistory(回数: 数値 = 1) {
    {state、commit} = this.context; とします。
    履歴を: HistoryItem[] = state.historys;
    現在の状態を数値とする。
    (現在 + 回数 >= history.length) の場合、戻り値:
    (times > 0) の間 {
      現在の++;
      history = history[current]とします。
      if (履歴) {
        コミット(history.redo、...history.redoParams、{root: true});
      }
      回--;
    }
    コミット("SET_CURRENT_HISTORY", 現在の);
  }

  // @Actionを元に戻す
  パブリックUndoHistory(回数: 数値 = 1) {
    {state、commit} = this.context; とします。
    履歴を: HistoryItem[] = state.historys;
    現在の状態を数値とする。
    (現在値 - 回数 < 0) の場合は return;
    (times > 0) の間 {
      history = history[current]とします。
      if (履歴) {
        コミット(history.undo、...history.undoParams、{root: true});
      }
      回--;
      現在 - ;
    }
    コミット("SET_CURRENT_HISTORY", 現在の);
  }
}

@突然変異
パブリック CREATE_PAGE(ペイロード: { ページ: PageItem; インデックス: 数値 }) {
  this.pages.splice(payload.index, 0, _.cloneDeep(payload.page));
  this._currentPage = this.pages.length - 1;
}

@突然変異
パブリック REMOVE_PAGE(id: 文字列) {
  index = this.pages.findIndex((p) => p.id == id); とします。
  インデックス > -1 && this.pages.splice(index, 1);
  if (this._currentPage == インデックス) {
    this._currentPage = this.pages.length > 0 ? 0 : -1;
  }
}

//パッケージ作成ページ関数@Action
パブリックCreatePage(タイプ: "ページ" | "ダイアログ") {
  {state、commit} = this.context; とします。
  
  // 作成されるページを記録して保存します。let id = _.uniqueId(type) + Date.now();
  pageName = pageType[type]とします。
  ページ: PageItem = {
    id、
    名前: `${pageName}${state.pages.length + 1}`,
    タイプ、
    レイヤー: [],
    スタイル: { 幅: 720, 高さ: 1280 },
  };

  //履歴を作成する let history: HistoryItem = {
    名前: `${pageName} を作成`,
    タイムストラップ: Date.now(),
    やり直し: "ページ/CREATE_PAGE",
    redoParams: [{ index: state.pages.length - 1, page }],
    元に戻す: "ページ/REMOVE_PAGE",
    undoParams: [id],
  };
  // この履歴を保存して記録します commit("Histroy/CREATE_HISTORY", history, { root: true });

  コミット(history.redo、...history.redoParams、{root: true});
}

@アクション
パブリックRemovePage(id: string) {
  // 現場の状況を記録して保存します。let index = this.pages.findIndex((p) => p.id == id);
  if (インデックス < 0) 戻り値:
  ページを作成します: PageItem = this.context.state.pages[index];

  //履歴を作成する let history: HistoryItem = {
    名前: `${page.name} を削除`,
    タイムストラップ: Date.now(),
    やり直し: "ページ/REMOVE_PAGE",
    再実行パラメータ: [id],
    元に戻す: "ページ/CREATE_PAGE",
    undoParams: [{ページ,インデックス}],
  };

  // この履歴レコードを保存します this.context.commit("Histroy/CREATE_HISTORY", history, { root: true });
  this.context.commit(history.redo, ...history.redoParams, { root: true });
}

  プライベート作成(タイプ: "ページ" | "ダイアログ") {
    this.$store.dispatch("Page/CreatePage", type);
  }

  プライベート削除(id: 数値) {
    this.$store.dispatch("Page/RemovePage", id);
  }

プライベートマウント() {
    自分自身 = this とします。
    ホットキー("ctrl+z", 関数(イベント, ハンドラー) {
      self.$store.dispatch("履歴/元に戻す履歴");
    });
    ホットキー("ctrl+y", 関数(イベント, ハンドラー) {
      self.$store.dispatch("履歴/再実行履歴");
    });
  }