Comment implémenter l'historique de recherche dans vue

À l'ère actuelle de développement technologique rapide, la recherche est devenue une fonction indispensable dans notre vie quotidienne. Derrière le moteur de recherche, l'historique de recherche d'un utilisateur après l'autre est souvent caché, afin que les utilisateurs puissent mieux gérer leurs enregistrements de recherche et trouver plus rapidement les informations dont ils ont besoin. Dans cet article, nous présenterons comment utiliser Vue pour implémenter la fonction d'historique de recherche.

1. Pré-connaissances

Avant de commencer, nous devons maîtriser une certaine quantité de connaissances sur Vue. Bien sûr, pour les débutants, cet article est aussi un bon projet de pratique.

Plus précisément, nous devons savoir comment utiliser les composants Vue, comment utiliser la bibliothèque de gestion d'état Vuex et comment utiliser localStorage et d'autres concepts et méthodes de base.

2. Description du projet

La fonction d'historique de recherche que nous mettrons en œuvre comprend principalement la mise en œuvre des trois aspects suivants :

1. Fonction de recherche dans la zone de saisie : après avoir saisi des mots-clés dans la zone de saisie, cliquez sur le bouton de recherche pour effectuer une recherche.

2. Fonction d'historique de recherche : stockez les enregistrements de recherche de l'utilisateur dans localStorage afin que les utilisateurs puissent trouver rapidement les enregistrements d'historique lors de leur prochaine recherche.

3. Fonction de gestion des enregistrements d'historique : les utilisateurs peuvent utiliser des enregistrements d'historique, tels que l'effacement d'enregistrements d'historique, la suppression d'un certain enregistrement d'historique, etc.

3. Implémentation du projet

1. Créer un composant Vue

Nous créons d'abord un composant de recherche, qui est responsable de la mise en œuvre spécifique de la fonction d'historique de recherche.

<template>
    <div>
        <input type="text" v-model="keyword">
        <button @click="handleSearch">搜索</button>
        <ul>
            <li v-for="(item, index) in searchHistory" :key="index">
                {{item}}
                <span @click="handleDelete(index)">删除</span>
            </li>
        </ul>
        <button @click="handleClear">清空</button>
    </div>
</template>

Ici, nous incluons une zone de saisie, un bouton de recherche et une liste affichant l'historique. Parmi eux, l'instruction v-model est utilisée pour implémenter la liaison de données bidirectionnelle et lier le mot-clé dans la zone de saisie ; l'instruction v-for est utilisée pour afficher cycliquement la liste des enregistrements de l'historique ;

2. Créer une gestion d'état Vuex

Vuex peut être compris comme un mécanisme global de gestion d'état Lorsque la communication de données doit être effectuée entre plusieurs composants, nous pouvons utiliser Vuex pour y parvenir. Ici, nous devons utiliser Vuex pour enregistrer et mettre à jour l'historique de recherche.

//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
        }
    }
})

Dans le fichier store.js, nous définissons le contenu pertinent de la gestion de l'état Vuex. Dans l'état, nous définissons le tableau d'historique de recherche searchHistory, et dans les mutations, nous définissons des opérations telles que l'ajout, la suppression et l'effacement du tableau, et nous effectuons également des opérations sur localStorage. Le initSearchHistory est utilisé pour initialiser le tableau Lorsqu'il existe un enregistrement d'historique dans le navigateur, il doit être initialisé avant de créer le composant.

3. Implémentation de la page

Ensuite, nous devons connecter le composant Search à la gestion de l'état Vuex afin qu'il ait les fonctions correspondantes. Ici, nous devons nous concentrer sur la partie méthodes du composant.

<script>
import {mapActions, mapGetters} from 'vuex'

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

Dans la section méthodes, nous mappons d'abord searchHistory au composant via mapGetters. Ensuite, nous mappons les opérations correspondantes dans l'état Vuex au composant via mapActions, qui inclut les opérations d'ajout, de suppression, d'effacement et d'initialisation que nous avons définies précédemment. Dans l'implémentation spécifique, lorsque nous cliquons sur le bouton de recherche, nous devons ajouter les mots-clés dans la zone de saisie à l'historique de recherche et effectuer la recherche en même temps.

4. Résumé

Sur la base des opérations ci-dessus, nous pouvons déjà implémenter la fonction d'historique de recherche. Cet article implémente la fonction de recherche par mot-clé, la sauvegarde et la mise à jour des enregistrements historiques et les fonctions de gestion des enregistrements historiques. Grâce à l'étude de ce petit projet, nous pouvons mieux maîtriser les méthodes de fonctionnement des composants Vue, de la bibliothèque de gestion d'état Vuex et de localStorage.

D'autres points à rappeler sont que pour certaines applications complexes, LocalStorage peut ne pas être un bon choix car il ne peut stocker que des types de chaînes, ce qui peut provoquer une confusion de types. En même temps, dans des cas d'utilisation relativement complexes, Vuex est également une optimisation correspondante ; des stratégies sont nécessaires pour améliorer les performances. Lors de l'utilisation, nous devons choisir avec flexibilité la méthode appropriée pour répondre aux besoins du développement front-end.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!