getters 适合封装纯函数式搜索逻辑，应分离搜索条件与数据源，按高选择性过滤→模糊搜索→排序顺序组合基础 getter，并对大数据集启用缓存、节流及异步搜索模式。
在 Vuex 或 Pinia 中，getters 本身不执行副作用、不修改状态，但非常适合封装基于当前 state 的派生逻辑，包括复杂搜索。关键不在于“用 getters 做搜索”，而在于把可复用、纯函数式的搜索判断逻辑沉淀到 getters 中，配合合理的 state 结构与响应式更新机制，实现高性能、易维护的搜索体验。
将搜索条件与数据源分离，用 getters 做“过滤器组合”
避免在组件中手写 filter + find + some 等链式调用。把每类筛选规则拆成独立 getter，再组合使用：
-
定义基础过滤器：如
filteredByStatus、searchedByKeyword、sortedByDate，每个只关注单一维度，接收原始列表和当前条件作为输入（条件可来自 state 或其他 getter） - 组合时保持顺序合理：先做高选择性过滤（如 status === 'active'），再做模糊搜索（减少字符串匹配量），最后排序 —— 利用 computed 的缓存特性，只有上游依赖变化时才重算
-
示例（Pinia）：
export const useProductStore = defineStore('product', { state: () => ({ list: [], keyword: '', statusFilter: 'all', sortBy: 'createdAt', }), getters: { // 先过滤状态 filteredByStatus: (state) => { if (state.statusFilter === 'all') return state.list; return state.list.filter(item => item.status === state.statusFilter); }, // 再按关键词搜索（仅对已过滤结果操作） searchedByKeyword: (state) => { const base = state.filteredByStatus; if (!state.keyword.trim()) return base; const kw = state.keyword.toLowerCase(); return base.filter(item => item.title?.toLowerCase().includes(kw) || item.sku?.includes(kw) || item.tags?.some(t => t.toLowerCase().includes(kw)) ); }, // 最后排序 sortedList: (state) => { const data = state.searchedByKeyword; return [...data].sort((a, b) => { if (state.sortBy === 'price') return a.price - b.price; if (state.sortBy === 'updatedAt') return new Date(b.updatedAt) - new Date(a.updatedAt); return 0; }); } } });
对大数据集启用“惰性计算 + 缓存键”策略
当 list 超过千条，且搜索条件频繁变化时，每次 getter 重算仍可能卡顿。此时需主动优化：
- 加一层记忆化（memoization）：用一个对象缓存 {keyword + status + sortBy} → result 的映射，getter 内部先查缓存，命中则直接返回；未命中再计算并存入。注意 key 要能唯一标识输入组合（可用 JSON.stringify([kw, status, sort])）
- 搜索条件变更时清空无关缓存：比如 keyword 改变，就应清除所有含旧 keyword 的缓存项，但保留 statusFilter 变更时的其他缓存（避免重复计算）
- 对超长文本搜索启用节流或防抖：不在 getter 内做，而是在用户输入事件中控制 state.keyword 的更新频率（例如 300ms 后才提交），从源头减少 getter 触发次数
用 computed + watchEffect 实现“搜索即服务”模式
对于需要异步加载、分页、高亮等进阶能力的场景，getters 不够用。此时可将搜索逻辑下沉为 store 内部方法，但用 getter 暴露当前搜索状态：
-
定义 searchResult、isSearching、searchError 等响应式字段，由 store 内部的
performSearch()方法更新 -
getter 仅作状态投影：如
hasResults: (state) => state.searchResult.length > 0、noMatch: (state) => !state.isSearching && state.searchResult.length === 0 - 组件中 watchEffect 监听搜索条件变化，自动触发 performSearch()，实现“条件一变，搜索即启”，无需手动调用
避免常见陷阱
- 不要在 getter 中发起 API 请求或修改 state —— 违反响应式原则，且无法被 Vue 正确追踪依赖
-
慎用深嵌套遍历：如
list.flatMap(x => x.children).filter(...)在大数组上性能差，优先考虑在数据入 store 前扁平化或建立索引（如 Map） - 国际化搜索要考虑 localeCompare 而非简单 toLowerCase()，尤其涉及德语、土耳其语等特殊大小写规则
- 服务端搜索场景下，getter 应只处理本地缓存数据的快速预览，最终结果以 API 返回为准，避免“假搜索”误导用户
