vue实现全局搜索

实现全局搜索功能的方法

在Vue中实现全局搜索功能，通常需要结合状态管理、API调用和组件设计。以下是几种常见的实现方式：

使用Vuex进行状态管理

安装Vuex并创建store模块：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    searchQuery: '',
    searchResults: []
  },
  mutations: {
    SET_SEARCH_QUERY(state, query) {
      state.searchQuery = query
    },
    SET_SEARCH_RESULTS(state, results) {
      state.searchResults = results
    }
  },
  actions: {
    async search({ commit }, query) {
      commit('SET_SEARCH_QUERY', query)
      const results = await api.search(query)
      commit('SET_SEARCH_RESULTS', results)
    }
  }
})

创建搜索组件

在组件中使用Vuex状态和操作：

<template>
  <div class="search-container">
    <input 
      v-model="searchQuery" 
      @input="onSearchInput"
      placeholder="全局搜索..."
    />
    <div v-if="searchResults.length" class="results">
      <div v-for="result in searchResults" :key="result.id">
        {{ result.title }}
      </div>
    </div>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['searchResults']),
    searchQuery: {
      get() {
        return this.$store.state.searchQuery
      },
      set(value) {
        this.$store.commit('SET_SEARCH_QUERY', value)
      }
    }
  },
  methods: {
    ...mapActions(['search']),
    onSearchInput() {
      this.search(this.searchQuery)
    }
  }
}
</script>

使用Provide/Inject实现跨组件通信

对于不需要Vuex的小型应用，可以使用provide/inject：

// 在根组件
export default {
  provide() {
    return {
      searchService: {
        query: '',
        results: [],
        search: this.search
      }
    }
  },
  methods: {
    search(query) {
      this.searchService.query = query
      // 调用API并更新results
    }
  }
}

// 在子组件
export default {
  inject: ['searchService'],
  computed: {
    searchResults() {
      return this.searchService.results
    }
  }
}

使用Composition API实现

对于Vue 3或使用Composition API的项目：

import { ref, computed } from 'vue'
import { useStore } from 'vuex'

export function useGlobalSearch() {
  const store = useStore()
  const searchQuery = ref('')

  const searchResults = computed(() => store.state.searchResults)

  const performSearch = () => {
    store.dispatch('search', searchQuery.value)
  }

  return {
    searchQuery,
    searchResults,
    performSearch
  }
}

优化搜索性能

添加防抖功能减少频繁请求：

import { debounce } from 'lodash'

methods: {
  onSearchInput: debounce(function() {
    this.search(this.searchQuery)
  }, 300)
}

搜索结果高亮显示

在显示搜索结果时实现关键词高亮：

methods: {
  highlight(text) {
    if (!this.searchQuery) return text
    const regex = new RegExp(this.searchQuery, 'gi')
    return text.replace(regex, match => `<span class="highlight">${match}</span>`)
  }
}

以上方法可以根据项目规模和需求选择适合的实现方式。Vuex适合中大型应用的状态管理，而provide/inject或Composition API更适合小型应用或特定场景。