App开发-使用Vue3+Vant组件实现历史搜索记录功能

使用Vue3+Vant组件实现App历史搜索记录功能

最近在开发一款新的app项目，我自己也是第一次接触app开发，经过团队的一段时间研究调查，决定使用Vue3+Vant前端组件的模式进行开发，vue2开发我们已经用过几个项目了，所以决定这一次尝试使用Vue3来进行前段开发。
我刚开始负责搜索功能的开发，有历史搜索记录的需求，一开始我认为这是记录的存储信息也会放在一个数据库表里面，但经过一番调查，发现并不是这样，而是要存储在本地。但是网上的方法也并没有完全解决问题，经过一番尝试，终于给搞好了，话不多说，直接上效果图。

1. 首先创建一个js文件
   这个js文件主要包括了增加历史记录信息，删除所有历史记录信息的功能

export default {

  // 添加搜索首页历史查询记录
  addSearchHistory(state, payload) {
    // list中包含该记录的时，删除
    const index = state.searchHistoryList.indexOf(payload);
    if (index > -1) {
      state.searchHistoryList.splice(index, 1);
    }
    state.searchHistoryList.unshift(payload);
    // 历史记录中最大记20个记录
    const count = state.searchHistoryList.length;
    state.searchHistoryList.splice(20,