标签：select === add item rom spl his cti cli
<li class="search-item" v-for="(item, index) in searches" :key="index" @click="selectItem(item)">
selectItem (item) { this.$emit(‘select‘, item) },
search组件里面调用：
<search-list :searches="searchHistory" @select="addSearchValue" ></search-list>
search-list中向外部传一个事件。
deleteOne (item) {
this.$emit(‘deleteOne‘, item)
}
search组件监听这个事件：
<search-list :searches="searchHistory" @selectItem="addSearchValue" @deleteOne="deleteOne" ></search-list>
这里的删除需要改变两部分
1：state里的数据
2：localStorage的数据
所以还需要在cache里面封装方法：
// 下面是deleteSearchOne的实现
export function deleteSearch (query) {
let searches = storage.get(SEARCH_KEY, [])
// 上面查看当前存储空间的情况，如果没有，就是一个空数组
// 删除逻辑：最大15条，每条放前面，重复的数据把原来的删除
deleteFromArray(searches, (item) => {
return item === query
})
storage.set(SEARCH_KEY, searches)
// 在缓存里面保存searches
return searches
// 再把这个searches返回出来，共vuex调用
}
// 封装一个删除的方法
function deleteFromArray (arr, compare) {
const index = arr.findIndex(compare)
if (index > -1) {
arr.splice(index, 1)
}
}
然后在action里面调用deleteSearchOne
export const deleteSearchHistory = function ({commit}, query) {
commit(types.SET_SEARCH_HISTORY, deleteSearch(query))
}
这样就可以了。然后在search组件里面使用action
...mapActions([
‘saveSearchHistory‘,
‘deleteSearchHistory‘
])
deleteOne (item) {
this.deleteSearchHistory(item)
},
这样实现点击删除一个条目
定义点击事件
<span class="clear" @click="deleteAll"> <i class="icon-clear"></i> </span>
点击事件通过action来修改state
deleteAll () { this.clearSearchHistory() },
...mapActions([ ‘saveSearchHistory‘, ‘deleteSearchHistory‘, ‘clearSearchHistory‘ ])
action代码如下：
export const clearSearchHistory = function ({commit}) { commit(types.SET_SEARCH_HISTORY, clearSearch()) }
因为这里要同时清除所有的state的数据还有localStorage的数据。所以还在在catch’里面定义clearSearch的方法：
export function clearSearch () { storage.remove(SEARCH_KEY) // 删除localhistory return [] // 返回空数组 }
如果方法只是调用action，并且参数一样的话，那么可以直接使用action映射的方法。
<search-list @deleteOne="deleteSearchHistory"></search-list> <span class="clear" @click="clearSearchHistory">
vue慕课网音乐项目手记：50-搜索列表的点击删除、删除全部的交互事件
标签：select === add item rom spl his cti cli
原文地址：https://www.cnblogs.com/catbrother/p/9181099.html
