vue本地查询代码实现

Vue 本地查询代码实现

使用计算属性实现本地查询

计算属性是Vue中处理本地数据查询的高效方式，适用于依赖响应式数据的场景。定义一个计算属性，根据输入的关键词过滤数组。

data() {
  return {
    searchQuery: '',
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' }
    ]
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

模板中绑定搜索输入和结果展示：

<input v-model="searchQuery" placeholder="Search">
<ul>
  <li v-for="item in filteredItems" :key="item.id">
    {{ item.name }}
  </li>
</ul>

使用方法实现动态查询

对于需要更复杂逻辑或手动触发的查询，可以使用方法。定义一个方法处理查询逻辑，通过事件触发或watch调用。

methods: {
  filterItems() {
    return this.items.filter(item =>
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

通过watch监听搜索词变化：

watch: {
  searchQuery(newVal) {
    this.filteredItems = this.filterItems()
  }
}

使用lodash实现防抖查询

对于高频输入的搜索场景，引入lodash的debounce函数减少计算频率，优化性能。

import { debounce } from 'lodash'

methods: {
  debouncedSearch: debounce(function() {
    this.filteredItems = this.items.filter(item =>
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }, 300)
},
watch: {
  searchQuery() {
    this.debouncedSearch()
  }
}

多条件复合查询

当需要基于多个字段进行复合查询时，扩展过滤逻辑，结合多个条件判断。

computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
      item.description.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

使用Vuex管理查询状态

在大型应用中，通过Vuex集中管理搜索状态和逻辑，保持数据流清晰。

// store.js
state: {
  items: [...],
  searchQuery: ''
},
getters: {
  filteredItems: state => {
    return state.items.filter(item =>
      item.name.toLowerCase().includes(state.searchQuery.toLowerCase())
    )
  }
}

组件中通过mapGetters获取过滤后的数据：

import { mapGetters } from 'vuex'

computed: {
  ...mapGetters(['filteredItems'])
}