这里的删除需要改变两部分
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)
},
删除全部
点击事件通过action来修改state
actions:
export const clearSearchHistory = function ({commit}) {
commit(types.SET_SEARCH_HISTORY, clearSearch())
}
export function clearSearch () {
storage.remove(SEARCH_KEY)
// 删除localhistory
return []
// 返回空数组
}