vueで検索履歴を実装する方法

今日の急速な技術発展の時代において、検索は私たちの日常生活に欠かせない機能となっています。ユーザーが自分の検索記録をより適切に管理し、必要な情報をより速く見つけることができるように、検索エンジンの背後にはユーザーの検索履歴が次々と隠されていることがよくあります。今回はVueを使って検索履歴機能を実装する方法を紹介します。

1. 前提知識

始める前に、ある程度の Vue の知識を習得する必要がありますが、もちろん初心者にとって、この記事は良い練習プロジェクトでもあります。

具体的には、Vue コンポーネントの使用方法、Vuex 状態管理ライブラリの使用方法、localStorage およびその他の基本的な概念とメソッドの使用方法を知る必要があります。

2. プロジェクトの説明

実装する検索履歴機能には、主に次の 3 つの側面の実装が含まれます:

1. 入力ボックスの検索機能: 入力ボックス内キーワードを入力後、検索ボタンをクリックして検索してください。

2. 検索履歴機能: ユーザーが実行した検索記録を localStorage に保存し、次回検索するときにすぐに履歴記録を見つけることができます。

3. 履歴管理機能: 履歴のクリアや特定の履歴の削除など、履歴の操作が可能です。

3. プロジェクトの実装

1. Vue コンポーネントの作成

最初に、検索履歴関数の特定の実装を担当する検索コンポーネントを作成します。

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

ここには、入力ボックス、検索ボタン、履歴レコードを表示するリストが含まれています。このうち、v-model 命令は双方向データ バインディングを実装し、入力ボックスにキーワードをバインドするために使用され、v-for 命令は履歴レコードのリストを循環的に表示するために使用されます。

2. Vuex 状態管理の作成

Vuex はグローバルな状態管理メカニズムとして理解でき、複数のコンポーネント間でデータ通信を実行する必要がある場合、Vuex を使用してそれを実現できます。ここでは、Vuex を使用して検索履歴を保存および更新する必要があります。

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

store.js ファイルでは、Vuex 状態管理の関連コンテンツを定義します。 state では検索履歴配列 searchHistory を定義し、mutations では配列の追加、削除、クリアなどの操作を定義し、localStorage に対する操作も実行します。 initSearchHistory は配列の初期化に使用されます。ブラウザーに履歴レコードがある場合は、コンポーネントを作成する前に初期化する必要があります。

3. ページの実装

次に、検索コンポーネントを Vuex 状態管理に接続して、対応する機能を持たせる必要があります。ここでは、コンポーネントのメソッド部分に注目する必要があります。

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

メソッド セクションでは、まず、mapGetters を通じて searchHistory をコンポーネントにマップします。次に、Vuex 状態の対応する操作を、mapActions を通じてコン​​ポーネントにマップします。これには、前に定義した追加、削除、クリア、および初期化操作が含まれます。具体的な実装では、検索ボタンをクリックしたときに、入力ボックス内のキーワードを検索履歴に追加し、同時に検索する必要があります。

4. まとめ

上記の操作に基づいて、検索履歴機能を実装することができます。本記事では、キーワード検索機能、履歴の保存・更新、履歴の管理機能を実装します。この小さなプロジェクトの学習を通じて、Vue コンポーネント、Vuex 状態管理ライブラリ、localStorage の操作方法をよりよく習得することができます。

その他の注意すべき点は、一部の複雑なアプリケーションでは、LocalStorage は文字列型しか保存できないため、型の混乱を引き起こす可能性があるため、適切な選択ではない可能性があるということです。同時に、比較的複雑な使用例では次のことを行います。 Vuex には、パフォーマンスを向上させるために対応する最適化戦略も必要です。使用時には、フロントエンド開発のニーズに合わせて適切な方法を柔軟に選択する必要があります。

以上がvueで検索履歴を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。