标签：query shift 添加 let 关键词 insert stat 需要 delete
搜索历史 搜索过的关键词 保存在本地存储 localstorage 中，同时多个组件共享搜索历史数据，将数据存到vuex 中，初始值从本地缓存中取得对应key 的值，没有数据默认为空数组
点击搜索关键词列表值的时候触发将关键词写入vuex 中，搜索结果列表suggest 组件向外派发事件，在需要渲染搜索历史列表的组件接受派发的事件提交actions 保存结果
封装actions 方法saveSearchHistory 提交commit 将
创建cache.js 在提交之前把关键词存放到本地存储中，cache.js 实现所有跟本地存储相关的逻辑。因为原生的localstorage api 需要将数组转换为字符串存储，相对麻烦，所以用good-storage 插件直接存数组
缓存到本地的数据最大缓存15条，并且新的插入在第一位，首先得到当前的存储数据情况，将关键字存到数组中，判断如果数组中有相同的数据，则把重复的数据删除，将新的关键字存入到前面
将插入数组判断的逻辑封装成insetArray 方法
function insertArray(arr, val, compare, maxLen) { // 当前数组，插入的值，比较是否有重复项函数，存储最大值 const index = arr.findIndex(compare) // 获取比较不同定义的查找函数，获取数组中对应的索引值 if (index === 0) { //如果是第一条数据则退出，原样返回数组 return } if (index > 0) { // 如果有数据，不是在第一位，则删除该重复数据 arr.splice(index, 1) } arr.unshift(val) // 将新值插入到第一位 if (maxLen && arr.length > maxLen) { //判断数组长度超出定义的长度，把数组的最后一位移除 arr.pop() } }
使用存储到本地缓存中。并返回一个已经筛选完的数组，可以用于存到vuex中
export function saveSearch(query) { let searches = storage.get(SEARCH_KEY, []) insertArray(searches, query, (item) => { return item === query // 比较获取的数组中有没有新值 }, SEARCH_MAX_LEN) // 存储最大值 storage.set(SEARCH_KEY, searches) //存入本地存储 return searches }
在actions 中调用
import {saveSearch} from ‘common/js/cache‘
export const saveSearchHistory = function({commit},query){
commit(types.SET_SEARCH_HISTORY,saveSearch(query));
}
删除一条搜索历史数据，点击删除，派发一个delete 事件，search 组件监听到事件提交一个action 从vuex 和缓存 中删除该条数据
删除逻辑和保存差不多，判断是否在缓存数组中有要删除的数据索引，如果有则删除，并更新缓存和vuex 数据
function deleteFromArray(arr, compare) { const index = arr.findIndex(compare) if (index > -1) { arr.splice(index, 1) } } export function deleteSearch(query) { let searches = storage.get(SEARCH_KEY, []) deleteFromArray(searches, (item) => { return item === query }) storage.set(SEARCH_KEY, searches) return searches }
actions
export const deleteSearchHistory = function({commit},query){ commit(types.SET_SEARCH_HISTORY,deleteSearch(query)); }
删除监听
<span class="icon" @click.stop="deleteOne(item)"> <search-list :searches="searchHistory" @select="addQuery" @delete="deleteSearchHistory"></search-list> // 监听派发事件直接指向actions 中定义的方法
点击清空所有搜索历史数据直接将缓存数组设置为空即可
export function clearSearch() { storage.remove(SEARCH_KEY) return [] }
最近播放列表 也需要存储在本地和vuex 中，在state.js 中设置playHistory:loadPlay() ，从缓存中获取初始值。当歌曲ready 播放的时候，写入数据actions 提交savePlayHistory，传入当前歌曲信息currentSong
插入存储套路个 搜索历史一样，比较函数 条件为song.id === item.id 比较当前歌曲的id 有没有相同的歌曲
export function savePlay(song) { let songs = storage.get(PLAY_KEY, []) insertArray(songs, song, (item) => { return song.id === item.id }, PLAY_MAX_LEN) storage.set(PLAY_KEY, songs) return songs }
点击最近播放列表，插入当前播放列表中，并且如果点击的最近播放列表不在第一位，则替换到第一位
selectSong(song, index) { if (index !== 0) { this.insertSong(new Song(song)) this.$refs.topTip.show() } },
添加收藏和删除收藏 歌曲的套路也一样
从界面角度操作点击收藏样式和功能 通过设置计算属性 根据判断当前歌曲是否在vuex 中存储，如果有的话则删除，没有的话则收藏。不同组件中有相同的收藏功能和逻辑的话，可以写在mixin 中共享调用
getFavoriteIcon(song){ if(this.isFavorite(song)){ return ‘icon-favorite‘ } return ‘icon-not-favorite‘ }, toggleFavorite(song){ if(this.isFavorite(song)){ this.deleteFavoriteList(song) }else{ this.saveFavoriteList(song); } }, isFavorite(song){ const index = this.favoriteList.findIndex((item)=>{ return item.id == song.id }) return index > -1 },
标签：query shift 添加 let 关键词 insert stat 需要 delete
原文地址：https://www.cnblogs.com/catbrother/p/9180526.html
