Verwenden Sie die Vue3+Vant-Komponente, um die Suchverlaufsfunktion der App zu implementieren (Beispielcode).

Standard exportieren {

  // Suchstartseitenverlaufsabfragedatensatz hinzufügen addSearchHistory(state, payload) {
    // Wenn die Liste den Datensatz enthält, löschen Sie ihn const index = state.searchHistoryList.indexOf(payload);
    wenn (Index > -1) {
      Zustand.searchHistoryList.splice(index, 1);
    }
    Status.searchHistoryList.unshift(Nutzlast);
    // Die maximale Anzahl von Datensätzen im Verlaufsdatensatz beträgt 20 const count = state.searchHistoryList.length;
    Zustand.searchHistoryList.splice(20, Anzahl);
  },

  // Lösche den Suchverlauf auf der Startseite clearSearchHistory(state) {
    Staat.searchHistoryList = [];
  },
};

<Vorlage>
  <!-- Suchfeld -->
  <Suchleiste
    @searchClick="Suchklick"
    :Platzhalterwert="Status.Platzhalterwert"
    :searchVal="Status.searchVal">
  </Suchleiste>
  <div Klasse="Suche">

    <!-- Suchverlauf -->
    <div Klasse="Geschichte" v-if="Zustand.isShowHistory">
      <span class="proHot">Suchverlauf</span>
      <span class="delHotSearch" @click="delHostClick">Verlauf löschen</span>

      <!-- Historische Datensatzinformationen speichern-->
      <div Klasse="searchBtn-div">
        <span v-for="(Element, Index) in Status.HistoryList" :key="Index" Klasse="searchValBtn" >
        <van-Schaltfläche
          runden
          Größe="klein"
          @click="SuchwertKlick(Element)"
          >{{ Artikel }}
        </van-button>
      </span>
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
importieren {
  aufMounted,
  reaktiv,
  getCurrentInstance,
} von „vue“;
importiere { Toast, Dialog } von 'vant';
Suchleiste aus „@/components/SearchBar.vue“ importieren;
importiere { useRouter } von „vue-router“;
importiere { useStore } von „vuex“;

Standard exportieren {

  Komponenten:
    Suchleiste,
  },

  aufstellen() {
    const router = useRouter();
    const store = useStore();
    const { proxy } = getCurrentInstance();
    const state = reaktiv({
      isShowHistory: '', // Ob der Verlauf angezeigt werden soll searchVal: '', // Suchbegriff placeholderValue: 'Suche nach Produkten/Informationen/Standards/Zutaten/Unternehmen',
      historyList: [], // historische Suchdaten});


    // Eingabetaste zur Suche const searchClick = (val) => {
      store.commit('Suchverlauf hinzufügen', Wert);
      // router.push({ Pfad: '/Suchdetail', Abfrage: { Suchwert: Wert } });
    };

    // Verlauf löschen const delHostClick = async () => {
      Dialog.confirm({
        Nachricht: „Möchten Sie Ihren Suchverlauf wirklich löschen?“ ',
      }).then(() => {
        store.commit('Suchverlauf löschen', speichern);
        Zustand.isShowHistory = false;
        Toast({
          Meldung: 'Erfolgreich gelöscht',
          Position: 'unten',
        });
      });
    };
	
	// Initialisieren und historische Suchdatensatzinformationen abrufen onMounted(async () => {
      // Historische Suchinformationen abrufen state.historyList = store.state.searchHistoryList;
      // Bestimmen Sie, ob die Anzeigeverlaufssuche initialisiert werden soll, wenn (state.historyList.length > 0) {
        Zustand.isShowHistory = true;
      } anders {
        Zustand.isShowHistory = false;
      }
    });

    zurückkehren {
      Zustand,
      SucheKlick,
      delHostClick,
    };
  },
};
</Skript>

<style lang="less" scoped>
</Stil>

importiere { useStore } von „vuex“;

const store = useStore();

// Initialisieren und Informationen zum historischen Suchdatensatz abrufen // Jedes Mal, wenn diese Seite geladen wird, wird diese Methode zuerst aufgerufen, um die neuesten Informationen abzurufen onMounted(async () => {
      // Historische Suchinformationen abrufen state.historyList = store.state.searchHistoryList;
      // Bestimmen Sie, ob die Anzeigeverlaufssuche initialisiert werden soll, wenn (state.historyList.length > 0) {
        Zustand.isShowHistory = true;
      } anders {
        Zustand.isShowHistory = false;
      }
    })

// Die untergeordnete Komponente gibt ein Ereignis aus und die übergeordnete Komponente ruft const searchClick = (val) => { auf.
    	// Suchwert in die Historie übernehmen	
      store.commit('Suchverlauf hinzufügen', Wert);
      // Die Routenumleitung kann ignoriert werden // router.push({ path: '/search-detail', query: { searchVal: val } });
    };

// Verlauf löschen const delHostClick = async () => {
      Dialog.confirm({
        Nachricht: „Möchten Sie Ihren Suchverlauf wirklich löschen?“ ',
      }).then(() => {
      	// Verlauf löschen informationstore.commit('clearSearchHistory', store);
        Zustand.isShowHistory = false;
        Toast({
          Meldung: 'Erfolgreich gelöscht',
          Position: 'unten',
        });
      });
    };