怎么用vue3做一个完整的有缓存的搜索功能

在 Vue3 中实现一个有缓存的搜索功能，通常会结合Vuex（状态管理库）来管理全局数据，并使用axios等工具处理网络请求。以下是步骤概述：

1. **安装依赖**:
- `npm install vue@next vuex axios @vueuse/router`
- 可选：如果需要缓存库，可以考虑`axios-cache-adapter` 或者 `vue-router-cache`

2. **创建状态管理模块 (store)**:
- 在 `store/index.js` 中初始化 Vuex store：

     import { createStore } from 'vuex'
     const state = {
       searchResults: [],
       cache: {}
     }
     const mutations = {
       setSearchResults(state, results) {
         state.searchResults = results
         // 清除过期的缓存数据
         clearCacheIfExpired()
       },
       updateCache(key, result) {
         // 将搜索结果存储到缓存
         this.cache[key] = result
       },
       // 缓存清理函数
       clearCache() {
         state.cache = {}
       }
     }

     export default createStore({
       state,
       mutations
     })

3. **组件结构**:
- 使用 `<script setup>` 和 `import { useStore }` 来访问 store：

     <template>
       <input v-model="searchTerm" @input="search"/>
       <ul>
         <li v-for="(item, index) in filteredItems" :key="index">{{ item }}</li>
       </ul>
     </template>

     <script setup>
       import { ref, onMounted, watchEffect } from 'vue'
       import { useStore } from './store'

       const store = useStore()
       const searchTerm = ref('');
       const items = computed(() => store.state.searchResults);
       const filteredItems = computed(() => filterItems(items.value, searchTerm.value));

       function search() {
         if (!searchTerm.value) return;
         const key = `${searchTerm.value}`;
         if (cacheHasItem(key)) {
           // 如果缓存中有结果，则直接返回
           setSearchResults(cacheGetItem(key));
         } else {
           // 否则发起网络请求
           fetchSearchResults(searchTerm.value).then(results => {
             store.commit('setSearchResults', results);
             // 更新缓存
             store.commit('updateCache', key, results);
           });
         }
       }

       // ...其他辅助函数...
     </script>

4. **缓存管理**:
- 使用 `axios-cache-adapter` 的缓存插件，或者自定义缓存逻辑在请求完成后将结果保存到 `cache` 对象。这里仅作示例：

     async function fetchSearchResults(query) {
       try {
         const response = await axios.get('/api/search', { params: { q: query }, cache: true }); // 使用缓存插件
         return response.data;
       } catch (error) {
         console.error(error);
         return [];
       }
     }

     function cacheHasItem(key) {
       // 检查缓存中是否存在对应的键值对
       return !!store.state.cache[key];
     }

     function cacheGetItem(key) {
       return store.state.cache[key];
     }

5. **清除缓存**:
- 添加清理缓存的逻辑，如定期清空、用户登录登出时清空等。

记得在路由守卫（router guards）里启用缓存插件，以便在页面刷新或路由切换时保持缓存一致性。