<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-搜索列表的點擊刪除、刪除全部的交互事件