Vue 3+VANtコンポーネントを使って、App検索履歴機能を実現する(例コード)
最近は新しいアプリプロジェクトを開発していますが、私自身も初めてapp開発に触れました。チームの調査を経て、Vue 3+VANt先端部品のモデルを使って開発することにしました。vue 2開発はいくつかのプロジェクトを使ったので、今回はVue 3を使って前の開発を試みることにしました。
検索機能の開発を始めたばかりです。歴史的な検索記録の需要があります。最初は記録した記憶情報もデータベーステーブルに入れると思いましたが、調査してみたら、そうではなくて、現地に保存することになりました。しかし、ネット上の方法も完全に問題を解決していません。いろいろ試してみて、やっとうまくなりました。話は多くなくて、直接に効果図を示します。
履歴検索記録を初期化しません。
回車検索は詳細ページに入ります。
履歴ページ
履歴をクリア
まずはjsファイルを作成します。
このjsファイルは主に履歴情報を追加して、履歴情報を全部削除する機能があります。
use Storeの導入
検索機能の開発を始めたばかりです。歴史的な検索記録の需要があります。最初は記録した記憶情報もデータベーステーブルに入れると思いましたが、調査してみたら、そうではなくて、現地に保存することになりました。しかし、ネット上の方法も完全に問題を解決していません。いろいろ試してみて、やっとうまくなりました。話は多くなくて、直接に効果図を示します。
履歴検索記録を初期化しません。
回車検索は詳細ページに入ります。
履歴ページ
履歴をクリア
まずは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, count);
},
//
clearSearchHistory(state) {
state.searchHistoryList = [];
},
};
Vueコードブロック
<template>
<!-- -->
<search-bar
@searchClick="searchClick"
:placeholderValue="state.placeholderValue"
:searchVal="state.searchVal">
</search-bar>
<div class="search">
<!-- -->
<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" >
<van-button
round
size="small"
@click="searchValClick(item)"
>{{ item }}
</van-button>
</span>
</div>
</div>
</div>
</template>
<script>
import {
onMounted,
reactive,
getCurrentInstance,
} from 'vue';
import { Toast, Dialog } from 'vant';
import searchBar from '@/components/SearchBar.vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
export default {
components: {
searchBar,
},
setup() {
const router = useRouter();
const store = useStore();
const { proxy } = getCurrentInstance();
const state = reactive({
isShowHistory: '', //
searchVal: '', //
placeholderValue: ' / / / / ',
historyList: [], //
});
//
const searchClick = (val) => {
store.commit('addSearchHistory', val);
// router.push({ path: '/search-detail', query: { searchVal: val } });
};
//
const delHostClick = async () => {
Dialog.confirm({
message: ' ?',
}).then(() => {
store.commit('clearSearchHistory', store);
state.isShowHistory = false;
Toast({
message: ' ',
position: 'bottom',
});
});
};
//
onMounted(async () => {
//
state.historyList = store.state.searchHistoryList;
//
if (state.historyList.length > 0) {
state.isShowHistory = true;
} else {
state.isShowHistory = false;
}
});
return {
state,
searchClick,
delHostClick,
};
},
};
</script>
<style lang="less" scoped>
</style>
Vueコードは直接コピーを貼り付けると使えないかもしれません。この中には多くの業務コードが削除されています。主に歴史検索記録のコードを残しています。主に三つのポイントがあります。use Storeの導入
import { useStore } from 'vuex';
const store = useStore();
検索履歴の初期化
//
// ,
onMounted(async () => {
//
state.historyList = store.state.searchHistoryList;
//
if (state.historyList.length > 0) {
state.isShowHistory = true;
} else {
state.isShowHistory = false;
}
})
検索ボックスで検索イベントを起動し、検索情報をStoreに保存します。
// ,
const searchClick = (val) => {
//
store.commit('addSearchHistory', val);
//
// router.push({ path: '/search-detail', query: { searchVal: val } });
};
履歴を空にする
//
const delHostClick = async () => {
Dialog.confirm({
message: ' ?',
}).then(() => {
//
store.commit('clearSearchHistory', store);
state.isShowHistory = false;
Toast({
message: ' ',
position: 'bottom',
});
});
};
以上はVue 3+VANtコンポーネントを使ってApp検索履歴機能の詳細を実現しました。Vue検索履歴に関する資料は他の関連記事に注目してください。