Vue에서 검색 기록을 구현하는 방법

빠르게 기술이 발전하는 오늘날, 검색은 우리 일상생활에서 없어서는 안 될 기능이 되었습니다. 검색 엔진 뒤에는 한 사용자의 검색 기록이 종종 숨겨져 있으므로 사용자는 검색 기록을 더 잘 관리하고 필요한 정보를 더 빨리 찾을 수 있습니다. 이번 글에서는 Vue를 사용하여 검색 기록 기능을 구현하는 방법을 소개하겠습니다.

1. 사전 지식

시작하기 전에 일정량의 Vue 지식을 습득해야 합니다. 물론 초보자에게는 이 기사도 좋은 연습 프로젝트입니다.

구체적으로는 Vue 컴포넌트 사용법, Vuex 상태 관리 라이브러리 사용법, localStorage 사용법과 기타 기본 개념과 방법을 알아야 합니다.

2. 프로젝트 설명

우리가 구현할 검색 기록 기능은 주로 다음 세 가지 측면의 구현을 포함합니다.

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 상태 관리 관련 내용을 정의합니다. 상태에서는 검색 기록 배열 searchHistory를 정의하고, 변이에서는 배열 추가, 삭제, 지우기와 같은 작업을 정의하고, localStorage에 대한 작업도 수행합니다. initSearchHistory는 배열을 초기화하는 데 사용됩니다. 브라우저에 기록 레코드가 있는 경우 구성 요소를 생성하기 전에 초기화해야 합니다.

3.페이지 구현

다음으로 Search 컴포넌트와 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를 구성 요소에 매핑합니다. 다음으로 이전에 정의한 추가, 삭제, 지우기 및 초기화 작업이 포함된 mapActions를 통해 Vuex 상태의 해당 작업을 구성 요소에 매핑합니다. 구체적인 구현에서는 검색 버튼을 클릭할 때 입력 상자의 키워드를 검색 기록에 추가하고 동시에 검색해야 합니다.

4. 요약

위 작업을 기반으로 이미 검색 기록 기능을 구현할 수 있습니다. 이 글에서는 키워드 검색 기능, 이력 저장 및 업데이트, 이력 관리 기능을 구현합니다. 이 작은 프로젝트에 대한 연구를 통해 Vue 구성 요소, Vuex 상태 관리 라이브러리 및 localStorage의 작동 방법을 더 잘 익힐 수 있습니다.

일부 복잡한 애플리케이션의 경우 LocalStorage는 문자열 유형만 저장할 수 있기 때문에 좋은 선택이 아닐 수 있으며, 이는 상대적으로 복잡한 사용 사례에서 Vuex도 해당 최적화입니다. 성과를 향상시키기 위한 전략이 필요하다. 사용 중에는 프런트 엔드 개발 요구 사항을 충족하기 위해 적절한 방법을 유연하게 선택해야 합니다.

위 내용은 Vue에서 검색 기록을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!