So implementieren Sie den Suchverlauf in Vue

In der heutigen Zeit der rasanten technologischen Entwicklung ist die Suche zu einer unverzichtbaren Funktion in unserem täglichen Leben geworden. Hinter der Suchmaschine verbirgt sich häufig der Suchverlauf eines Benutzers nach dem anderen, sodass Benutzer ihre Suchdatensätze besser verwalten und die benötigten Informationen schneller finden können. In diesem Artikel stellen wir vor, wie Sie Vue zum Implementieren der Suchverlaufsfunktion verwenden.

1. Vorkenntnisse

Bevor wir beginnen, müssen wir uns natürlich bestimmte Vue-Kenntnisse aneignen. Für Anfänger ist dieser Artikel auch ein gutes Übungsprojekt.

Insbesondere müssen wir wissen, wie man Vue-Komponenten verwendet, wie man die Vuex-Statusverwaltungsbibliothek verwendet und wie man localStorage und andere grundlegende Konzepte und Methoden verwendet.

2. Projektbeschreibung

Die Suchverlaufsfunktion, die wir implementieren werden, umfasst hauptsächlich die Implementierung der folgenden drei Aspekte:

1 Funktion: Klicken Sie nach der Eingabe von Schlüsselwörtern in das Eingabefeld auf die Suchschaltfläche, um zu suchen.

2. Suchverlaufsdatensatzfunktion: Speichern Sie die vom Benutzer durchgeführten Suchdatensätze in localStorage, damit der Benutzer die Verlaufsdatensätze bei der nächsten Suche schnell finden kann.

3. Funktion zur Verwaltung von Verlaufsdatensätzen: Benutzer können Verlaufsdatensätze bearbeiten, z. B. Verlaufsdatensätze löschen, einen bestimmten Verlaufsdatensatz löschen usw.

3. Projektimplementierung

1 Erstellen Sie eine Vue-Komponente

Wir erstellen zunächst eine Suchkomponente, die für die spezifische Implementierung des verantwortlich ist Suchverlaufsfunktion.

<template>
    <div>
        <input>
        <button>搜索</button>
        <ul>
            <li>
                {{item}}
                <span>删除</span>
            </li>
        </ul>
        <button>清空</button>
    </div>
</template>

Hier fügen wir ein Eingabefeld, eine Suchschaltfläche und eine Liste mit dem Verlauf ein. Unter anderem wird die V-Modell-Anweisung verwendet, um eine bidirektionale Datenbindung zu implementieren und das Schlüsselwort Schlüsselwort im Eingabefeld zu binden. Die V-For-Anweisung wird verwendet, um die Liste der Verlaufsdatensätze zyklisch anzuzeigen.

2. Vuex-Zustandsverwaltung erstellen

Vuex kann als globaler Zustandsverwaltungsmechanismus verstanden werden. Wenn Datenkommunikation zwischen mehreren Komponenten durchgeführt werden muss, können wir Vuex dazu verwenden erreichen. Hier müssen wir Vuex verwenden, um den Suchverlauf zu speichern und zu aktualisieren.

//store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        searchHistory: []
    },
    mutations: {
        addSearchHistory(state, keyword) {
            if (!state.searchHistory.includes(keyword)) {
                state.searchHistory.push(keyword)
                localStorage.setItem('searchHistory', JSON.stringify(state.searchHistory))
            }
        },
        clearSearchHistory(state) {
            state.searchHistory = []
            localStorage.removeItem('searchHistory')
        },
        deleteSearchHistory(state, index) {
            state.searchHistory.splice(index, 1)
            localStorage.setItem('searchHistory', JSON.stringify(state.searchHistory))
        },
        initSearchHistory(state) {
            state.searchHistory = JSON.parse(localStorage.getItem('searchHistory') || '[]')
        }
    },
    getters: {
        searchHistory(state) {
            return state.searchHistory
        }
    }
})

In der Datei store.js definieren wir den relevanten Inhalt der Vuex-Statusverwaltung. Im Status definieren wir das Suchverlauf-Array searchHistory, und in Mutationen definieren wir Vorgänge wie das Hinzufügen, Löschen und Löschen des Arrays und führen auch Vorgänge für localStorage durch. Die initSearchHistory wird zum Initialisieren des Arrays verwendet. Wenn im Browser ein Verlaufseintrag vorhanden ist, sollte dieser vor dem Erstellen der Komponente initialisiert werden.

3. Seitenimplementierung

Als nächstes müssen wir die Suchkomponente mit der Vuex-Statusverwaltung verbinden, damit sie über die entsprechenden Funktionen verfügt. Hier müssen wir uns auf den Methodenteil der Komponente konzentrieren.

<script>
import {mapActions, mapGetters} from &#39;vuex&#39;

export default {
    name: &#39;Search&#39;,
    data() {
        return {
            keyword: &#39;&#39;
        }
    },
    computed: mapGetters({
        searchHistory: &#39;searchHistory&#39;
    }),
    methods: {
        ...mapActions([
            &#39;addSearchHistory&#39;,
            &#39;clearSearchHistory&#39;,
            &#39;deleteSearchHistory&#39;,
            &#39;initSearchHistory&#39;
        ]),
        handleSearch() {
            if (this.keyword) {
                this.addSearchHistory(this.keyword)
                // do search
            }
        },
        handleClear() {
            this.clearSearchHistory()
        },
        handleDelete(index) {
            this.deleteSearchHistory(index)
        }
    },
    created() {
        this.initSearchHistory()
    }
}
</script>

Im Methodenabschnitt ordnen wir zunächst searchHistory über MapGetters der Komponente zu. Als Nächstes ordnen wir die entsprechenden Vorgänge im Vuex-Status der Komponente über „mapActions“ zu, was die zuvor definierten Vorgänge zum Hinzufügen, Löschen, Löschen und Initialisieren umfasst. Wenn wir in der spezifischen Implementierung auf die Suchschaltfläche klicken, müssen wir die Schlüsselwörter im Eingabefeld zum Suchverlauf hinzufügen und gleichzeitig suchen.

4. Zusammenfassung

Basierend auf den oben genannten Vorgängen können wir die Suchverlaufsfunktion bereits implementieren. In diesem Artikel werden die Schlüsselwortsuchfunktion, das Speichern und Aktualisieren historischer Aufzeichnungen sowie die Verwaltungsfunktionen historischer Aufzeichnungen implementiert. Durch das Studium dieses kleinen Projekts können wir die Betriebsmethoden von Vue-Komponenten, der Vuex-Statusverwaltungsbibliothek und localStorage besser beherrschen.

Ein weiterer erwähnenswerter Punkt ist, dass LocalStorage für einige komplexe Anwendungen möglicherweise keine gute Wahl ist, da es nur Zeichenfolgentypen speichern kann, was in relativ komplexen Anwendungen gleichzeitig zu Typverwechslungen führen kann Für die Anwendungsfälle benötigt Vuex auch entsprechende Optimierungsstrategien, um die Leistung zu verbessern. Im Einsatz müssen wir flexibel die geeignete Methode auswählen, um den Anforderungen der Front-End-Entwicklung gerecht zu werden.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Suchverlauf in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!