点击选中到搜索框
<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">