Beispielcode zur Implementierung des Verlaufs in Vuex

Schnittstelle HistoryItem {
  timestrap: Zahl; // Zeitstempel des Datensatzes name: Zeichenfolge; // Name des Datensatzes redo: Zeichenfolge; // Mutation wiederholen
  undo: string; // Mutation rückgängig machen
  redoParams: any[]; // Mutationsübermittlungsparameter wiederholen undoParams: any[]; // Mutationsübermittlungsparameter rückgängig machen }

Schnittstelle HistoryStatus {
  historys: HistoryItem[]; // Verlauf aufzeichnen array_currentHistory: Nummer; // aktueller Knotenindex}

importiere { VuexModul, Modul, Mutation, Aktion } von „vuex-module-decorators“;

@Modul({ namespaced: true })
exportiere Klasse HistoryModule erweitert VuexModule<HistoryStatus> implementiert HistoryStatus {
  /** 
   * Der Grund für die Initialisierung eines leeren Datensatzes besteht hauptsächlich darin, Listenoperationen zu erleichtern:
   * Wenn der Benutzer auf den frühesten Datensatz klickt, kann der erste Schritt der Benutzeroperation normal rückgängig gemacht werden**/
  öffentliche Geschichten:HistoryItem[] = [
    {
      Name: `Öffnen`,
      Zeitleiste: Date.now(),
      wiederholen: "",
      redoParams: [],
      rückgängig machen: "",
      undoParams: [],
    },
  ];
  öffentliche _currentHistory: Zahl = 0;

  // Getter
  aktuelle abrufen(){
    gib dies zurück._currentHistory;
  }

  // Getter
  Holen Sie sich historyList(): HistoryItem[] {
    gib diese.Geschichten zurück || [];
  }

  // Verlauf erstellen @Mutation
  öffentliche CREATE_HISTORY(Nutzlast: HistoryItem) {
    wenn (this._currentHistory < this.historys.length - 1) {
      diese.historys = diese.historys.slice(0, diese._currentHistory);
    }
    // Aufgrund des tiefen und flachen Kopierproblems von js müssen die Daten beim Erstellen tief kopiert werden // Ich möchte die Klonfunktion von lodash ausprobieren, finde aber, dass die Klonmethode von JSON.stringify schneller sein sollte. Schließlich existieren unsere Daten nicht in der Funktion // Ich werde es hier nicht ändern, hauptsächlich um die Idee auszudrücken this.historys.push(_.cloneDeep(payload));
    this._currentHistory = this.historys.length - 1;
  }

  @Mutation
  öffentliche SET_CURRENT_HISTORY(index: zahl) {
    this._currentHistory = Index < 0? 0: Index;
  }

  // @Action wiederholen
  öffentliche RedoHistory(Zeiten: Zahl = 1) {
    lass { Status, Commit } = diesen.Kontext;
    let history: HistoryItem[] = status.historys;
    lass aktuell: Zahl = Status._aktuelleHistory;
    wenn (aktuell + Zeiten >= Verlauf.Länge) return;
    während (Zeiten > 0) {
      aktuell++;
      lass Geschichte = Geschichten[aktuell];
      wenn (Geschichte) {
        commit(history.redo, ...history.redoParams, { root: true });
      }
      mal--;
    }
    commit("SET_CURRENT_HISTORY", aktuell);
  }

  // @Action rückgängig machen
  public UndoHistory(Zeiten: Zahl = 1) {
    lass { Status, Commit } = diesen.Kontext;
    let history: HistoryItem[] = status.historys;
    lass aktuell: Zahl = Status._aktuelleHistory;
    wenn (aktuell – Zeiten < 0) return;
    während (Zeiten > 0) {
      lass Geschichte = Geschichten[aktuell];
      wenn (Geschichte) {
        commit(history.undo, ...history.undoParams, { root: true });
      }
      mal--;
      aktuell--;
    }
    commit("SET_CURRENT_HISTORY", aktuell);
  }
}

@Mutation
public CREATE_PAGE(payload: { Seite: PageItem; Index: Nummer }) {
  diese.Seiten.splice(Nutzlast.index, 0, _.cloneDeep(Nutzlast.seite));
  this._currentPage = this.pages.length - 1;
}

@Mutation
öffentliche REMOVE_PAGE(id: Zeichenfolge) {
  let index = this.pages.findIndex((p) => p.id == id);
  index > -1 und diese.Seiten.splice(index, 1);
  wenn (diese._aktuelleSeite == index) {
    this._currentPage = this.pages.length > 0 ? 0 : -1;
  }
}

//Paket erstellen Seitenfunktion @Action
public CreatePage(Typ: "Seite" | "Dialog") {
  lass { Status, Commit } = diesen.Kontext;
  
  //Zu erstellende Seite aufzeichnen und speichern let id = _.uniqueId(type) + Date.now();
  let Seitenname = Seitentyp[Typ];
  let Seite: PageItem = {
    Ausweis,
    Name: `${pageName}${state.pages.length + 1}`,
    Typ,
    Ebenen: [],
    Stil: { Breite: 720, Höhe: 1280 },
  };

  //Verlauf erstellen let history: HistoryItem = {
    Name: `Erstellen Sie ${pageName}`,
    Zeitleiste: Date.now(),
    wiederholen: "Seite/SEITE_ERSTELLEN",
    redoParams: [{ index: state.pages.length - 1, Seite }],
    rückgängig machen: "Seite/REMOVE_PAGE",
    undoParams: [id],
  };
  // Diesen Verlauf speichern und aufzeichnen commit("Histroy/CREATE_HISTORY", history, { root: true });

  commit(history.redo, ...history.redoParams, { root: true });
}

@Aktion
öffentliche RemovePage(id: string) {
  // Den Status vor Ort aufzeichnen und speichern let index = this.pages.findIndex((p) => p.id == id);
  wenn (Index < 0) zurückgeben;
  let page: PageItem = this.context.state.pages[index];

  //Verlauf erstellen let history: HistoryItem = {
    Name: `${page.name} löschen`,
    Zeitleiste: Date.now(),
    wiederholen: "Seite/SEITE_ENTFERNEN",
    redoParams: [id],
    rückgängig machen: "Seite/SEITE_ERSTELLEN",
    undoParams: [{ Seite, Index }],
  };

  // Diesen Verlaufsdatensatz speichern this.context.commit("Histroy/CREATE_HISTORY", history, { root: true });
  this.context.commit(history.redo, ...history.redoParams, { root: true });
}

  private erstellen(Typ: "Seite" | "Dialog") {
    this.$store.dispatch("Seite/Seite erstellen", Typ);
  }

  private remove(id: Nummer) {
    this.$store.dispatch("Seite/Seite entfernen", id);
  }

privat gemountet() {
    lass self = dies;
    Hotkeys("Strg+Z", Funktion (Ereignis, Handler) {
      self.$store.dispatch("Verlauf/Verlauf rückgängig machen");
    });
    Hotkeys("Strg+Y", Funktion (Ereignis, Handler) {
      self.$store.dispatch("Verlauf/Verlauf wiederherstellen");
    });
  }