Vue音乐--搜索页面11_搜索历史逻辑点击、删除

本文链接：https://blog.youkuaiyun.com/kingAn123/article/details/83015098

这篇博客详细介绍了如何在Vue项目中实现音乐搜索历史功能，包括点击歌手li将搜索词添加到输入框，点击x删除当前搜索历史，以及点击垃圾桶图标清空所有搜索历史。通过使用Vuex进行状态管理，结合本地缓存，实现了功能交互。代码示例分别展示了在search.vue、catch.js、actions.js和searchHistory.vue中的关键操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大概步骤：

在这里插入图片描述

目标效果

在这里插入图片描述

七、点击歌手li

要点：
- 点击li添加到输入框
- 点击x删除当前搜索历史
- 点击垃圾桶清空搜索历史

（一）、点击添加到输入框

在热门搜索关键词里是一样的逻辑，主要是做好父子组件事件的派发就可以了。
↓search.vue

  	addQuery(item){
  		this.$refs.searchbox.setQuery(item)
  	},

（二）、点击x删除当前搜索历史

获取本地缓存数据，并找到点击的一项index，删除，再存新数组回本地缓存
catch.js

/*************删除本地缓存中的搜索历史***********************************/
export function deleteSearch(query){
	//如果已有历史就get缓存中的数组，没有就空数组
	let searches = storage.get(SEARCH_KEY,[])	//(自定义key,无值默认空数组)
	//对传入的项与已有数组进行操作
	deleteFromArray(searches,(item)=>{
		return item===query
	})
	//把操作过后的数组set就直接替换掉原历史
	storage.set(SEARCH_KEY,searches)
	return searches
}

/*******actions删除搜索历史关键词*************/
function deleteFromArray(arr,compare){
	//找到点击的index
	const index = arr.findIndex(compare)
	if(index>-1){
		arr.splice(index,1)
	}
}

actions.js
点击时触发actions操作vuex数据

/*****点击删除搜索历史，因为多个数据操作，浏览器本地缓存*************/
export const deleteSearchHistory = function({commit},query){
	commit(types.SET_SEARCH_HISTORY,deleteSearch(query))
}

searchHistory.vue

import {mapActions} from 'vuex'

deleteOne(item){
	this.deleteSearchHistory(item)
}

...mapActions([
      'deleteSearchHistory',
    ])

（三）、点击垃圾桶清空

catch.js
调用插件的删除整个插件，并给初始值一个空数组

/*************清空本地缓存中的搜索历史***********************************/
export function clearSearch(){
	//清空缓存
	storage.remove(SEARCH_KEY)
	//返回一个空数组
	return []
}

actions.js

/*****点击清空搜索历史，因为多个数据操作，浏览器本地缓存*************/
export const clearSearchHistory = function({commit}){
	commit(types.SET_SEARCH_HISTORY,clearSearch())
}

searchHistory.vue

deleteAll(){
	this.clearSearchHistory()
}

...mapActions([
      'clearSearchHistory'
    ])

当actions方法（包括参数）与点击事件相同时可以直接写在html中:
@click=“clearSearchHistory” clearSearchHistory是actions的方法
在js中要this.clearSearchHistory

<i class="iconfont" @click="clearSearchHistory">&#xe61d;</i>

项目来源：慕课网
如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com