vue慕课网音乐项目手记：50-搜索列表的点击删除、删除全部的交互事件

<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">