a1300399510@qq.com 提交于 2023/04/06 -14:40:01

src/components/SearchBox.vue

@@ -54,7 +54,7 @@ export default {
 	watch: {
 		historicalSearch(val, oldval) {
 			if (val.length > 10) this.historicalSearch.slice(0, 10)
-			localStorage.setItem('historicalSearch', JSON.stringify(val));
+			this.$store.commit('setHistoricalSearch', val)
 		}
 	},
 
@@ -98,13 +98,6 @@ export default {
 		if (this.searchText.length > 0) this.showClear = true
 		else this.showClear = false
 
-
-		// let hotSearchkeywords = ["香港大学", "香港大学"]
-		// console.log(JSON.stringify(hotSearchkeywords));
-
-		this.historicalSearch = JSON.parse(localStorage.getItem('historicalSearch')) || []
-		console.log(this.historicalSearch);
-
 	}
 }
 </script>

src/store/index.js

@@ -12,13 +12,19 @@ export default new Vuex.Store({
   mutations: {
     setHistoricalSearch(state, payload) {
       state.historicalSearch = payload
+
+      localStorage.setItem('historicalSearch', JSON.stringify(payload));
+
+
     }
   },
   actions: {
+    // 获取历史搜索的数据
     fetchHistoricalSearch({ commit }) {
       let historicalSearch = JSON.parse(localStorage.getItem('historicalSearch')) || []
       commit('setHistoricalSearch', historicalSearch)
-    }
+    },
+    
   },
   modules: {
   }

src/views/search/searchResult/SearchResult.vue

@@ -19,7 +19,6 @@
 			<div class="result-item flexflex" v-for="(item, index) in list" :key="index">
 				<div class="result-header one-line">
 					<div class="result-label">{{ item.forum }}</div>
-					<!-- <div class="result-title">{{  item.subject }}</div> -->
 					<div class="result-title" v-html="item.subject"></div>
 				</div>
 
@@ -76,7 +75,9 @@ export default {
 			page: 1,
 			list: [],
 			searchResultState: false,
-			loading: null
+			loading: null,
+			historicalSearch: this.$store.state.historicalSearch, // 历史搜索
+
 		}
 	},
 	components: {
@@ -92,6 +93,11 @@ export default {
 		searchResultState(val, oldval) {
 			if (val) this.$startupUnderLoading(this)
 			else this.$closeUnderLoading(this)
+		},
+
+		historicalSearch(val, oldval) {
+			if (val.length > 10) this.historicalSearch.slice(0, 10)
+			this.$store.commit('setHistoricalSearch', val)
 		}
 	},
 
@@ -99,13 +105,14 @@ export default {
 	methods: {
 		// 处理点击取消的返回上一页
 		handCancel() {
-			console.log(this);
 			if (this.$route.params.page > 1) this.$router.go(-1)
 			else this.$router.push('/recommend')
 		},
 
 		// 获取搜索结果数据
 		getSearchResult() {
+			if (!this.kw) return
+
 			if (this.searchResultState) return
 			this.searchResultState = true
 			let kw = this.kw
@@ -116,11 +123,6 @@ export default {
 			}).then(res => {
 				let data = res.data
 
-				// console.log(data.data);
-				// console.log(kw);
-				// data.data.forEach(el => {
-				// 	console.log(el.subject);
-				// })
 
 				this.list = data.data
 				this.count = data.count
@@ -129,6 +131,10 @@ export default {
 				document.documentElement.scrollTop = 0;
 				document.body.scrollTop = 0;
 				this.searchResultState = false
+			}).finally(() => {
+				let kw = this.kw
+				this.historicalSearch.push(kw)
+				if (!this.historicalSearch.includes(kw)) this.historicalSearch.unshift(kw)
 			})
 		},