vue3+ts+pinia实现搜索

要实现搜索功能，首先需要在 Pinia 中定义一个 store，用于存储搜索相关的状态和数据。示例代码如下：

import { defineStore } from 'pinia';

interface SearchState {
  keyword: string;
  results: any[]; // 存储搜索结果
}

export const useSearchStore = defineStore({
  id: 'search',
  state: (): SearchState => ({
    keyword: '',
    results: [],
  }),
  getters: {
    hasResults(state): boolean {
      return state.results.length > 0;
    },
  },
  actions: {
    search(keyword: string) {
      // 发起搜索请求，获取搜索结果
      // 这里可以使用 axios 或其他类库，获取后端接口返回的数据
      const results = [{ title: '搜索结果1' }, { title: '搜索结果2' }];
      this.keyword = keyword;
      this.results = results;
    },
    clearResults() {
      this.results = [];
    },
  },
});

在组件中使用该 store，需要使用 `useStore` 方法获取 store 实例，然后在模板中绑定输入框和搜索按钮的事件。示例代码如下：

<template>
  <div>
    <input v-model="keyword" placeholder="输入关键字" />
    <button @click="handleSearch">搜索</button>
    <ul v-if="hasResults">
      <li v-for="result in results" :key="result.title">{{ result.title }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from 'pinia';
import { useSearchStore } from './searchStore';

export default defineComponent({
  setup() {
    const store = useStore(useSearchStore);

    const keyword = store.keyword;
    const results = store.results;
    const hasResults = store.hasResults;

    const handleSearch = () => {
      store.search(keyword);
    };

    return {
      keyword,
      results,
      hasResults,
      handleSearch,
    };
  },
});
</script>

在模板中，我们使用了 `v-model` 指令绑定了输入框的值，使用 `@click` 绑定了搜索按钮的点击事件。在 `setup` 中使用 `useStore` 方法获取了 store 实例，并将 store 中的状态和方法绑定到模板中使用。在 `handleSearch` 方法中，调用了 store 的 `search` 方法，发起了搜索请求，更新了 store 中的状态，从而触发了模板中对应的响应式状态的更新。最终，我们根据 store 中的状态来展示搜索结果。