vue-music（17）删除一条历史记录和全部记录

这里的删除需要改变两部分
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 []
  // 返回空数组
}