Bagaimana untuk melaksanakan sejarah carian dalam vue

Dalam era perkembangan teknologi yang pesat hari ini, pencarian telah menjadi fungsi yang sangat diperlukan dalam kehidupan seharian kita. Di sebalik enjin carian, sejarah carian satu demi satu pengguna sering disembunyikan, supaya pengguna dapat mengurus rekod carian mereka dengan lebih baik dan mencari maklumat yang mereka perlukan dengan lebih cepat. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan fungsi sejarah carian.

1. Pengetahuan prasyarat

Sebelum kita mula, kita perlu menguasai pengetahuan Vue tertentu Sudah tentu, untuk pemula, artikel ini juga merupakan projek latihan yang baik.

Secara khusus, kita perlu tahu cara menggunakan komponen Vue, cara menggunakan perpustakaan pengurusan negeri Vuex dan cara menggunakan localStorage serta konsep dan kaedah asas yang lain.

2. Penerangan Projek

Fungsi sejarah carian yang akan kami laksanakan terutamanya termasuk pelaksanaan tiga aspek berikut:

1 Selepas memasukkan kata kunci, klik butang carian untuk mencari.

2. Fungsi sejarah carian: Simpan rekod carian yang dilakukan oleh pengguna dalam localStorage, supaya pengguna dapat mencari rekod sejarah dengan cepat apabila mereka mencari.

3. Fungsi pengurusan rekod sejarah: Pengguna boleh mengendalikan rekod sejarah, seperti mengosongkan rekod sejarah, memadam rekod sejarah tertentu, dsb.

3. Pelaksanaan projek

1. Cipta komponen Vue

Kami mula-mula mencipta komponen Carian, yang bertanggungjawab untuk pelaksanaan khusus fungsi sejarah carian.

<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>

Di sini kami menyertakan kotak input, butang carian dan senarai yang menunjukkan sejarah. Antaranya, arahan model v digunakan untuk melaksanakan pengikatan data dua hala dan mengikat kata kunci kata kunci dalam kotak input arahan v-untuk digunakan untuk memaparkan senarai rekod sejarah secara kitaran.

2. Cipta pengurusan keadaan Vuex

Vuex boleh difahami sebagai mekanisme pengurusan keadaan global Apabila komunikasi data perlu dijalankan antara berbilang komponen, kami boleh menggunakan Vuex untuk mencapainya. Di sini, kita perlu menggunakan Vuex untuk menyimpan dan mengemas kini sejarah carian.

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

Dalam fail store.js, kami mentakrifkan kandungan pengurusan negeri Vuex yang berkaitan. Dalam keadaan, kami mentakrifkan tatasusunan sejarah carian Sejarah carian, dan dalam mutasi kami mentakrifkan operasi seperti menambah, memadam dan mengosongkan tatasusunan, dan kami juga melaksanakan operasi pada Storan setempat. initSearchHistory digunakan untuk memulakan tatasusunan Apabila terdapat rekod sejarah dalam penyemak imbas, ia harus dimulakan sebelum mencipta komponen.

3. Pelaksanaan halaman

Seterusnya, kita perlu menyambungkan komponen Carian dengan pengurusan keadaan Vuex supaya ia mempunyai fungsi yang sepadan. Di sini, kita perlu memberi tumpuan kepada kaedah bahagian komponen.

<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>

Dalam bahagian kaedah, kami mula-mula memetakan Sejarah carian kepada komponen melalui mapGetters. Seterusnya, kami memetakan operasi yang sepadan dalam keadaan Vuex kepada komponen melalui mapActions, yang merangkumi operasi tambah, padam, kosongkan dan permulaan yang kami takrifkan sebelum ini. Dalam pelaksanaan khusus, apabila kita mengklik butang carian, kita perlu menambah kata kunci dalam kotak input pada sejarah carian dan carian pada masa yang sama.

4. Ringkasan

Berdasarkan operasi di atas, kami sudah boleh melaksanakan fungsi sejarah carian. Artikel ini melaksanakan fungsi carian kata kunci, menyimpan dan mengemas kini rekod sejarah, dan fungsi pengurusan rekod sejarah. Melalui kajian projek kecil ini, kami dapat menguasai kaedah pengendalian komponen Vue, perpustakaan pengurusan negeri Vuex dan localStorage dengan lebih baik.

Perkara lain yang patut diingatkan ialah untuk sesetengah aplikasi yang rumit, LocalStorage mungkin bukan pilihan yang baik kerana ia hanya boleh menyimpan jenis rentetan, yang boleh menyebabkan kekeliruan jenis pada masa yang sama, dalam kes penggunaan yang agak rumit Seterusnya, Vuex juga memerlukan strategi pengoptimuman yang sepadan untuk meningkatkan prestasi. Dalam penggunaan, kita perlu memilih kaedah yang sesuai secara fleksibel untuk memenuhi keperluan pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan sejarah carian dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!