vue3+ts+pinia写拼多多搜索页面的本地存储、历史记录添加到第一条、长按删除、删除所有、更多展示功能

首先，我们需要安装 `pinia` 和 `axios`，可以使用以下命令：

npm install pinia axios --save

接着，我们需要创建一个 `store` 文件夹，并在其中创建一个名为 `search.ts` 的文件。在 `search.ts` 中，我们将创建一个 `SearchStore` 类，用于管理搜索页面的数据。

import { defineStore } from 'pinia';
import axios from 'axios';

interface HistoryItem {
  value: string;
  timestamp: number;
}

export const useSearchStore = defineStore({
  id: 'search',
  state: () => ({
    keyword: '',
    history: [] as HistoryItem[],
  }),
  getters: {
    isKeywordEmpty: (state) => state.keyword.trim() === '',
    hasHistory: (state) => state.history.length > 0,
    historyList: (state) => {
      return state.history.sort(
        (a, b) => b.timestamp - a.timestamp
      ).map(item => item.value)
    },
  },
  actions: {
    setKeyword(keyword: string) {
      this.keyword = keyword;
    },
    addHistoryItem(keyword: string) {
      const timestamp = new Date().getTime();
      const item: HistoryItem = { value: keyword, timestamp };
      this.history.unshift(item);
    },
    removeHistoryItem(index: number) {
      this.history.splice(index, 1);
    },
    clearAllHistory() {
      this.history = [];
    },
    async search() {
      const { data } = await axios.get('https://api.pinduoduo.com/api/gindex/search', {
        params: {
          keyword: this.keyword
        }
      });
      return data;
    }
  }
});

在上面的代码中，我们定义了一个 `SearchStore` 类，其中包含以下属性和方法：

- `keyword`：当前的搜索关键字。
- `history`：历史记录列表，每个记录包含一个值和一个时间戳。
- `isKeywordEmpty`：是否当前的搜索关键字为空。
- `hasHistory`：是否存在历史记录。
- `historyList`：历史记录列表，仅包含值。
- `setKeyword`：设置当前的搜索关键字。
- `addHistoryItem`：向历史记录列表添加一个新的记录。
- `removeHistoryItem`：删除指定索引的历史记录。
- `clearAllHistory`：删除所有历史记录。
- `search`：执行搜索操作，并返回搜索结果。

接下来，我们需要在搜索页面中使用 `SearchStore`。我们将创建一个名为 `Search.vue` 的文件，并在其中使用 `useSearchStore` hook。

<template>
  <div class="search">
    <div class="search-bar">
      <input type="text" v-model.trim="keyword" @input="onInput" />
      <button class="search-btn" @click="onSearch" :disabled="isKeywordEmpty">搜索</button>
    </div>
    <div class="history" v-show="hasHistory">
      <div class="title">历史记录</div>
      <div class="list">
        <div class="item" v-for="(item, index) in historyList" :key="item" @click="onHistoryItemClick(item)">
          <span>{{ item }}</span>
          <i class="iconfont icon-delete" @click.stop="removeHistoryItem(index)" />
        </div>
      </div>
      <div class="clear-all" @click="clearAllHistory">清空历史</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useSearchStore } from '@/store/search';

export default defineComponent({
  name: 'Search',
  setup() {
    const searchStore = useSearchStore();

    const keyword = searchStore.keyword;
    const historyList = searchStore.historyList;
    const isKeywordEmpty = searchStore.isKeywordEmpty;
    const hasHistory = searchStore.hasHistory;

    function onInput(e: InputEvent) {
      searchStore.setKeyword((e.target as HTMLInputElement).value);
    }

    function onSearch() {
      if (!isKeywordEmpty) {
        searchStore.addHistoryItem(keyword);
        searchStore.search().then((data) => {
          console.log(data);
        });
      }
    }

    function onHistoryItemClick(item: string) {
      searchStore.setKeyword(item);
      onSearch();
    }

    function removeHistoryItem(index: number) {
      searchStore.removeHistoryItem(index);
    }

    function clearAllHistory() {
      searchStore.clearAllHistory();
    }

    return {
      keyword,
      historyList,
      isKeywordEmpty,
      hasHistory,
      onInput,
      onSearch,
      onHistoryItemClick,
      removeHistoryItem,
      clearAllHistory,
    };
  },
});
</script>

在上面的代码中，我们使用 `useSearchStore` hook 创建了一个 `searchStore` 实例，并从中获取了一些属性和方法，例如 `keyword`、`historyList`、`isKeywordEmpty`、`hasHistory`、`setKeyword`、`addHistoryItem`、`removeHistoryItem`、`clearAllHistory` 和 `search`。我们还定义了一些组件的事件处理函数，例如 `onInput`、`onSearch`、`onHistoryItemClick`、`removeHistoryItem` 和 `clearAllHistory`。

最后，我们需要在 `main.ts` 中注册 `pinia`。

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app');

现在，我们已经完成了使用 `pinia` 和 `axios` 编写拼多多搜索页面的本地存储、历史记录添加到第一条、长按删除、删除所有、更多展示功能的实现。