Vue3+Vantコンポーネントを使用してアプリの検索履歴機能を実装する（サンプルコード）

エクスポートデフォルト{

  // 検索ホームページ履歴クエリレコードを追加する addSearchHistory(state, payload) {
    // リストにレコードが含まれている場合は削除します const index = state.searchHistoryList.indexOf(payload);
    （インデックス＞-1）の場合{
      state.searchHistoryList.splice(インデックス、1);
    }
    state.searchHistoryList.unshift(ペイロード);
    // 履歴レコードの最大数は 20 です。const count = state.searchHistoryList.length;
    state.searchHistoryList.splice(20, カウント);
  },

  // ホームページの検索履歴をクリアする clearSearchHistory(state) {
    状態.searchHistoryList = [];
  },
};

<テンプレート>
  <!-- 検索ボックス -->
  <検索バー
    @searchClick="検索クリック"
    :placeholderValue="state.placeholderValue"
    :searchVal="state.searchVal">
  </検索バー>
  <div class="検索">

    <!-- 検索履歴 -->
    <div class="history" v-if="state.isShowHistory">
      <span class="proHot">検索履歴</span>
      <span class="delHotSearch" @click="delHostClick">履歴を消去</span>

      <!-- 履歴レコード情報を保存します-->
      <div class="searchBtn-div">
        <span v-for="(item, index) in state.historyList" :key="index" class="searchValBtn" >
        <バンボタン
          ラウンド
          サイズ="小"
          @click="searchValClick(アイテム)"
          >{{ アイテム }}
        </バンボタン>
      </span>
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
輸入 {
  マウント済み、
  反応的、
  現在のインスタンスを取得、
} から 'vue';
'vant' から { Toast, Dialog } をインポートします。
'@/components/SearchBar.vue' から searchBar をインポートします。
'vue-router' から useRouter をインポートします。
'vuex' から useStore をインポートします。

エクスポートデフォルト{

  コンポーネント:
    検索バー、
  },

  設定（） {
    定数ルーター = useRouter();
    定数ストア = useStore();
    const { プロキシ } = getCurrentInstance();
    定数状態 = リアクティブ({
      isShowHistory: '', // 履歴を表示するかどうか searchVal: '', // 検索キーワード placeholderValue: '商品/情報/規格/原材料/企業を検索',
      historyList: [], // 履歴検索データ});


    // 検索するには入力してください const searchClick = (val) => {
      store.commit('addSearchHistory', val);
      // router.push({ path: '/search-detail', query: { searchVal: val } });
    };

    // 履歴をクリア const delHostClick = async () => {
      ダイアログ.確認({
        メッセージ: 「検索履歴を削除してもよろしいですか?」 '、
      }).then(() => {
        store.commit('clearSearchHistory', store);
        状態.isShowHistory = false;
        トースト（{
          メッセージ: '正常に削除されました'、
          位置: '下'、
        });
      });
    };
	
	// 履歴検索レコード情報を初期化して取得する onMounted(async () => {
      // 履歴検索情報を取得します。state.historyList = store.state.searchHistoryList;
      // 表示履歴検索を初期化するかどうかを決定します if (state.historyList.length > 0) {
        状態.isShowHistory = true;
      } それ以外 {
        状態.isShowHistory = false;
      }
    });

    戻る {
      州、
      検索クリック、
      delHostクリック、
    };
  },
};
</スクリプト>

<style lang="less" スコープ>
</スタイル>

'vuex' から useStore をインポートします。

定数ストア = useStore();

// 履歴検索レコード情報を初期化して取得します // このページが読み込まれるたびに、このメソッドが最初に呼び出され、最新情報が取得されます onMounted(async () => {
      // 履歴検索情報を取得します。state.historyList = store.state.searchHistoryList;
      // 表示履歴検索を初期化するかどうかを決定します if (state.historyList.length > 0) {
        状態.isShowHistory = true;
      } それ以外 {
        状態.isShowHistory = false;
      }
    })

// 子コンポーネントがイベントを発行し、親コンポーネントが呼び出します const searchClick = (val) => {
    	// 検索値を履歴に保存する	
      store.commit('addSearchHistory', val);
      // ルートのリダイレクトは無視できます // router.push({ path: '/search-detail', query: { searchVal: val } });
    };

// 履歴をクリア const delHostClick = async () => {
      ダイアログ.確認({
        メッセージ: 「検索履歴を削除してもよろしいですか?」 '、
      }).then(() => {
      	// 履歴をクリアする情報store.commit('clearSearchHistory', store);
        状態.isShowHistory = false;
        トースト（{
          メッセージ: '正常に削除されました'、
          位置: '下'、
        });
      });
    };